Sélectionner des text nodes

**zorbalegrec** · 07/07/2009, 19h40

Bonjour,

je dois sélectionner le text node qui suit une classe .highlight dans des blocs html comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="myDiv">
    <p>
	<span class="highlight">Jour 1</span> Arrivée et accueil à Kautenbach
	<br/>Vous arrivez à l’hébergement en fin d’après-midi soit par train et l’hôtelier viendra vous chercher à la gare soit par véhicule personnel, repas du soir et nuit en hôtel 4* 		
        <br/>
	<span class="highlight">Jour 2</span> Kautenbach - Bourscheid
	<br/>Cette première journée permet d’appréhender immédiatement le plaisir de randonner dans ce pays riche d’une nature variée et reposante. etc...
    </p>
</div>

J'ai pas mal googlé, il existe au moins deux plugins pour faire différentes choses avec les text nodes, (http://plugins.learningjquery.com/textchildren/ et http://jqueryjs.googlecode.com/svn/t...ins/textNodes/ )je les ai testés, mais en définitive, NADA

Voici, sans plugins ce que j'ai pondu, et je pense toucher au but:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('#myDiv p').each(function(){
 
        $(this.childNodes).filter(function(){
 
	       if ( this.className == 'highlight' )
 
                     return  this.nextSibling.nodeType == 3 
	})
 
	.css('color','red');//pour tester
 
});

Sauf que nextSibling n'est pas pris en compte et que c'est seulement .highlight qui rougit.
J'ai essayé diff. syntaxes dans la fn filter, mais c'est tjs highlight qui ressort,
pas moyen de sélectionner son voisin!

Merci d'avance de vos propositions éclairées

**danielhagnoul** · 07/07/2009, 22h35

Bonsoir.

Voir les commentaires dans le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // Avec Firefox et l'extension Firebug
 
            //trouve le noeud texte suivant le premier class highlight
            //si vous laissez les <br/>, c'est le premier <br/> qui est le noeud suivant.
            console.log($(".highlight:eq(0)").parent().next());
            console.log($(".highlight:eq(0)").parent().next()[0].nodeType);
            console.log($(".highlight:eq(0)").parent().next().text());
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="myDiv">
            <p>
                <span class="highlight">Jour 1</span> Arrivée et accueil à Kautenbach
            </p>
            <p>
                Vous arrivez à l’hébergement en fin d’après-midi soit par train et l’hôtelier viendra vous chercher à la gare soit par véhicule personnel, repas du soir et nuit en hôtel 4*         
            </p>
            <p>
                <span class="highlight">Jour 2</span> Kautenbach - Bourscheid
            </p>
            <p>
                Cette première journée permet d’appréhender immédiatement le plaisir de randonner dans ce pays riche d’une nature variée et reposante. etc...
            </p>
        </div>
    </div>
</body>
</html>

**zorbalegrec** · 08/07/2009, 14h26

Bonjour Daniel,

merci pour cette réponse. Ceci étant, je ne vois pas à quoi peut me servir ton script, dans le contexte de ma question? Si tu veux bien m'éclairer?

Car j'ai besoin d'un script qui tourne en production, crossbrowser et sans firebug. Dautre part, je ne peux remplacer les <br /> par des successions de <p> car je récupère une requête SQL et c'est ce qu'elle me renvoie. Sauf à revoir le traitement des chaines...

MA question est bien de récupérer ce nextSibling qui trotte à coté de chacune de mes classes ".highlight". D'ailleurs, à propos Firebug me donne bien comme nextSibling du 1er .highlight : "Arrivée et accueil à Kautenbach", qui est le node que je souhaite récupérer pour lui appliquer une classe CSS.

Donc comment écrire ma règle de filter() pour que ce soit le next Sibling qui sorte et pas le .highlight.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('#myDiv p').each(function(){
 
        $(this.childNodes).filter(function(){
 
	       if ( this.className == 'highlight' )
 
                     return  this.nextSibling.nodeType == 3 
	})
 
	.css('color','red');//pour tester
 
});

Merci

Sélectionner des text nodes

jQuery

Vue hybride

Discussions similaires

Partager

Partager