Récupérer tous les attributs "id" d'une chaine

[Gedan]

Bonjour,

Cela fait 2 jours que je cherche une solution sur une fonction qui me semblait toute bête à réaliser.

Code :

1
2
3
4
5
6
7
8
 
//Initialisation de la chaîne de test avec un maximum d'attributs "id"
var val = '<div id="mon_div"><div id="mon_div2">eaea</div></div>
<p><select id="mon_select" name="test"><option>Test</option></select><a id="mon_lien">Mon Lien</a></p><span id="mon_span">hello <span id="mon_span2">bonjour</span>aurevoir</span>';
 
$(val).each(function(){
    alert($(this).attr('id));
});

Le but de ce bout de code est de récupérer la valeur des attributs "id" de tous les éléments présents dans la chaine "val".

La boucle fonctionne bien pour les attributs "id" des "div", mais cela me retourne une valeur vide pour les attributs "id" des "span" ou du "select". Donc ca veut dire que ces éléments rentrent bien dans la boucle mais qu'il n'arrive pas a récupérer la valeur de l'attribut "id".

Avez-vous une solution ? ^^

[jreaux62]

Bonjour,
j'ai "bricolé" un truc ...
Ca fonctionne sur 3 niveaux d'imbrication :

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
30
	<!-- Scripts Google : initialisation jquery -->
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		// Initialisation de la chaîne de test avec un maximum d'attributs "id"
		var chaine;
		chaine  = '<div id="mon_div1">contenu div1 + ...<div id="mon_div2">contenu <span id="mon_span0">blabla</span>div2 <p id="mon_p">(p)bonjour</p>eaea</div>  ...fin</div>';
		chaine += '<p><select id="mon_select" name="test"><option value="opt1" selected="selected">Test</option></select></p>';
		chaine += '<p><a id="mon_lien">Mon Lien</a></p>';
		chaine += '<div><span id="mon_span1">(span1)hello <span id="mon_span2">(span2)bonjour</span>au revoir</span></div>';
 
		var list_idnom = '';
		var next_text = '';
		$(chaine).each(function(){
			// niveau 1
			if($(this).attr('id')) list_idnom += '1- ' + $(this).attr('id') + "\n";
			$(this).children().each(function(){
				// niveau 2
				if($(this).attr('id')) list_idnom += '2-- ' + $(this).attr('id') + "\n";
				$(this).children().each(function(){
					// niveau 3
					if($(this).attr('id')) list_idnom += '3---- ' + $(this).attr('id') + "\n";
						// ... et ainsi de suite ...
				});
			});
		});
 
		alert(list_idnom);
	});
	</script>

1- mon_div1
2-- mon_div2
3---- mon_span0
3---- mon_p
2-- mon_select
2-- mon_lien
2-- mon_span1
3---- mon_span2

Je ne sais pas si/comment on peut faire mieux ...

[Gedan]

Merci pour ton code qui fonctionne très bien.

Il est sur que j'aurais préféré quelque chose en 1 seule ligne mais comme tu le dis, je ne pense pas que ce soit possible.

[jreaux62]

J'ai une version optimisée : quel que soit le niveau d'imbrication

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
	<!-- Scripts Google : initialisation jquery -->
	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		// Initialisation de la chaîne de test avec un maximum d'attributs "id"
		var chaine;
		chaine  = '<div id="mon_div1">contenu div1 + ...<div id="mon_div2">contenu <span id="mon_span0">blabla</span>div2 <p id="mon_p">(p)bonjour</p>eaea</div>  ...fin</div>';
		chaine += '<p><select id="mon_select" name="test"><option value="opt1" selected="selected">Test</option></select></p>';
		chaine += '<p><a id="mon_lien">Mon Lien</a></p>';
		chaine += '<div><span id="mon_span1">(span1)hello <span id="mon_span2">(span2)bonjour</span>au revoir</span></div>';
 
		var list_idnom = '';
		$(chaine).each(function(){
			if($(this).attr('id')) list_idnom += $(this).attr('id') + "\n";
			var next_child = $(this).children();
			while(next_child.attr('id')) {
				next_child.each(function(){
					if($(this).attr('id')) list_idnom += $(this).attr('id') + "\n";
					next_child = $(this).children();
				});
			}
		});
 
		alert(list_idnom);
	});
	</script>

ou en mettant les résultats dans un array :

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
30
31
32
	<!-- Scripts Google : initialisation jquery -->
	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		// Initialisation de la chaîne de test avec un maximum d'attributs "id"
		var chaine;
		chaine  = '<div id="mon_div1">contenu div1 + ...<div id="mon_div2">contenu <span id="mon_span0">blabla</span>div2 <p id="mon_p">(p)bonjour</p>eaea</div>  ...fin</div>';
		chaine += '<p><select id="mon_select" name="test"><option value="opt1" selected="selected">Test</option></select></p>';
		chaine += '<p><a id="mon_lien">Mon Lien</a></p>';
		chaine += '<div><span id="mon_span1">(span1)hello <span id="mon_span2">(span2)bonjour</span>au revoir</span></div>';
 
		var array_idnom = new Array(); // array qui contiendra les noms des id
		var i = 0; // index
		var next_child = '';
		$(chaine).each(function(){
			if($(this).attr('id')) { array_idnom[i] = $(this).attr('id'); i++; }
			next_child = $(this).children();
			while(next_child.attr('id')) {
				next_child.each(function(){
					if($(this).attr('id')) { array_idnom[i] = $(this).attr('id'); i++; }
					next_child = $(this).children();
				});
			}
		});
		// affichage
		var list_idnom = '';
		for(i=0; i<array_idnom.length; i++) {
			list_idnom += array_idnom[i]+"\n";
		}
		alert(list_idnom);
	});
	</script>

Liste obtenue :

mon_div1
mon_div2
mon_span0
mon_p
mon_select
mon_lien
mon_span1
mon_span2

[Loceka]

Envoyé par Gedan

Merci pour ton code qui fonctionne très bien.

Il est sur que j'aurais préféré quelque chose en 1 seule ligne mais comme tu le dis, je ne pense pas que ce soit possible.

Euh si, mais il faut se rappeller que le javascript existe... :

Code :

1
2
3
4
5
6
var val = '<div id="mon_div"><div id=\'mon_div2\'>eaea</div></div><p><select id="mon_select" name="test"><option>Test</option></select><a id="mon_lien">Mon Lien</a></p><span id="mon_span">hello <span id="mon_span2">bonjour</span>aurevoir</span>';
var regex = / id\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
 
while (results = regex.exec(s)) {
	alert(results[1] || results[2]);
}