[jQuery]selector

Version imprimable

[jQuery]selector

Bonjour,

Le titre n'est pas clair, je ne sais pas trop comment expliquer autrement que par du code.
Donc voici, j'ai un arbre HTML comme ceci :
Code:

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 <ul id="nav"> <li> Documents <ul> <li> Photos <ul> <li>Photo1.jpg</li> <li>Photo2.jpg</li> <li>Photo3.jpg</li> </ul> </li> <li>Musique <ul> <li>Song_1.mp3</li> <li>Song_2.mp3</li> </ul> </li> </ul> </li> <li> Livres <ul> <li>Book1.pdf</li> <li>Book2.pdf</li> </ul> </li> </ul>
Et je souhaite en jQuery récupérer tous les éléments étant des "feuilles" de l'arbre, c-a-d dans ce cas :
Code:

1 2 3 4 5 6 7 <li>Photo1.jpg</li> <li>Photo2.jpg</li> <li>Photo3.jpg</li> <li>Song_1.mp3</li> <li>Song_2.mp3</li> <li>Book1.pdf</li> <li>Book2.pdf</li>
Sachant que je ne connais pas à l'avance la profondeur de l'arbre. J'ai essayé différents trucs mais je ne trouve pas :(

Merci de votre aide

23/05/2008, 14h25
benji07

Il faut que tu sélectionne tous les li qui n'ont pas de li comme fils.

Code:

$('li').not('li li')

Je pense qu'un truc comme ça devrais marcher

Merci de ta réponse.

En fait, j'ai modifié mon code HTML de départ, il n'était pas correct. Le bon code est maintenant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
		<ul id="nav">
			<li>Documents</li>
			<ul>
				<li>Photos</li>
				<ul>
					<li>Photo1.jpg</li>
					<li>Photo2.jpg</li>
					<li>Photo3.jpg</li>
				</ul>
				<li>Musique</li>
				<ul>
					<li>Song_1.mp3</li>
					<li>Song_2.mp3</li>
				</ul>
			</ul>
			<li>Livres</li>
			<ul>
				<li>Book1.pdf</li>
				<li>Book2.pdf</li>
				<li></li>
			</ul>
		</ul>

Par contre, j'ai toujours le même problème et là ta solution ne fonctionne plus du coup. :(

23/05/2008, 14h44
guitoux1

Bon j'y suis presque avec ça :

Code:

$("#nav li + :not(ul)");

Mais il me zappe toujours les premiers éléments de la liste (Photo1, Song_1 et Book1) :(
23/05/2008, 14h49
benji07

ton html n'est pas valide, un ul ne peut avoir que des li comme fils direct et pas de ul dans ton premier exemple le code html été valide
23/05/2008, 15h11
guitoux1

OK j'ai modifié mon HTML, mais le code jQuery proposé ne fonctionne pas :(
23/05/2008, 15h33
guitoux1

OK j'ai trouvé !! :

Code:

$("li :not(:has(ul))").filter("li");

J'ai du ajouter un filter("li") à la fin car bizarrement il me récupère aussi les balises <ul> si je ne le met pas (pourtant je précise bien que je veux des li en début de selector)
23/05/2008, 15h35
benji07

Et si tu vire l'espace entre li et :
23/05/2008, 15h37
guitoux1

OK pour la deuxième mais la première me ramène trop de résultats. Je vais utilisa ta solution numéro 2, ça limite la taille du code (pas de filter)

Merci
23/05/2008, 15h39
guitoux1

Exact, sans l'espace c'est encore mieux, plus besoin de filter() :)

Merci