Discussion :

[guitoux1]

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 HTML :

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
 
<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 HTML :

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

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

[benji07]

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

Code :

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

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

Je pense qu'un truc comme ça devrais marcher

[guitoux1]

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 HTML :

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
		<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.

[guitoux1]

Bon j'y suis presque avec ça :

Code jQuery :

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

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

Mais il me zappe toujours les premiers éléments de la liste (Photo1, Song_1 et Book1)

[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

[guitoux1]

OK j'ai modifié mon HTML, mais le code jQuery proposé ne fonctionne pas

[guitoux1]

OK j'ai trouvé !! :

Code jQUERY :

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

$("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)

[benji07]

Et si tu vire l'espace entre li et :

[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

[guitoux1]

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

Merci