Compter le nombre de liens [Résolu]

[jeremux]

Bonjour,

Je viens d'apprendre le javascript en cours et je n'ai aucune base si ce n'est que le langage java lui même bref. Pour un td on doit compter le nombre de liens (a) contenu dans un éléments (li). Je n'ai vraiment pas d'idée sur le code. Pour compter le nombre de lien ok, mais sinon...

Code :

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
 
      function compter() {
	  	var a = document.getElementsByTagName('a');
		var cpt = 0;
		for (var i=0,c = a.length; i < c; i++){
				cpt = cpt + 1;
		}
		alert(cpt);
	  }
</script>

Comme spécifier que les liens doivent être contenus dans des "li" ?

Merci.

[Willpower]

Code js :

1
2
3
4
 var lis = document.getElementsByTagName('li'),cpt=0;
 for(var i=0;i<lis.length;i++)
 	cpt += lis[i].getElementsByTagName('a').length;
 alert(cpt);

[jeremux]

Merci Willpower, mais si le lien est fils d'un paragraphe et que ce paragraphe est fils d'un li alors il sera comptabilisé et ce n'est pas le résultat souhaité.

Par exemple pour ce code ça doit retourner 5:

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<ul>
   <li> xxxx <a href=""> yyy</a> zzz </li>
   <li> xxxx <a href=""> yyy</a> zzz <a href=""> yyy</a></li>
   <li> xxxx </li>
</ul>
<ul>
   <li> xxxx <a href=""> yyy</a> zzz </li>
   <li> xxxx <a href=""> yyy</a> zzz <p><a href=""> yyy</a></p></li>
   <li> xxxx </li>
</ul>

[mekal]

et avec l'objet links

Code :

1
2
 
monelement.links.length;

[Willpower]

Envoyé par jeremux

Merci Willpower, mais si le lien est fils d'un paragraphe et que ce paragraphe est fils d'un li alors il sera comptabilisé et ce n'est pas le résultat souhaité.

Par exemple pour ce code ça doit retourner 5:

Code :

et il pourra même être comptabilisé 2 fois dans le cas des li imbriqué ! au temps pour moi, ma réponse est totalement incorrecte !

[jeremux]

pas de soucis je pense que je n'ai pas assez détaillé le problème. J'ai essayé ça mais rien de concluant:

Code :

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
 
      function compter() {
	  	var li = document.getElementsByTagName('li').childNodes;
		var cpt = 0;
		for (var i=0; i<li.length; i++){
				cpt = cpt + li[i].getElementsByTagName("a").length;
				}
		alert(cpt);
	  }
</script>

[Willpower]

Code js :

1
2
3
4
5
6
7
8
9
 
 	var li = document.getElementsByTagName('LI'),cpt=0;
	for(var i=0;i<li.length;i++) {
 		var child = li[i].childNodes;
 		for(var j=0;j<child.length;j++)
			if(child[j].nodeName == 'A')
				cpt++;
	}
 	alert(cpt);

[jeremux]

Merci WillPower ça marche Je vais essayer de comprendre où j'ai coincé dans mon code:

Code :

1
2
3
4
5
6
7
8
9
function compter() {
	  	var a = document.getElementsByTagName('a');
		var cpt = 0;
		for (var i=0; i<a.length; i++){
			if (a[i].parentNode==(document.getElementsByTagName('li'))[0]){
				cpt = cpt + 1;
				}
		}
		alert(cpt);}

(Si quelqu'un voit l'erreur n'hésitez pas, sinon je verrais demain avec la prof)


Merci à tous!

[Willpower]

Envoyé par jeremux

Merci WillPower ça marche Je vais essayer de comprendre où j'ai coincé dans mon code:

Code :

(Si quelqu'un voit l'erreur n'hésitez pas, sinon je verrais demain avec la prof)


Merci à tous!

correction :

Code :

1
2
3
4
5
6
7
function compter() {
	  	var a = document.getElementsByTagName('a'), cpt=0;
		for (var i=0; i<a.length; i++)
			if (a[i].parentNode.nodeName == "LI")
				cpt++;
		alert(cpt);
}

ta solution ne comportant qu'une boucle est bien meilleure que la mienne.

sinon ton erreur :
if (a[i].parentNode==(document.getElementsByTagName('li'))[0])
ça comparait le noeud parent de ton lien (jusque là ok)
au premier ([0]) li récupéré dans le tableau de tous les li de ta page !

[NoSmoking]

(Si quelqu'un voit l'erreur n'hésitez pas, sinon je verrais demain avec la prof)

si tu parles du code mis avec ce message voici 2 commentaires

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function compter() {
  //--------------------------------------
  // peut etre remplace par document.links
  //--------------------------------------
  var a = document.getElementsByTagName('a');
  var cpt = 0;
  for (var i = 0; i < a.length; i++) {
    //-------------------------------------------------------
    // reducteur tu ne compares qu'avec le 1st LI du document
    // si le 1st LI n'a pas de A alors tu auras 0
    // si le 1st LI a un A alors tu auras 1
    //-------------------------------------------------------
    if (a[i].parentNode == (document.getElementsByTagName('li'))[0]) {
      cpt = cpt + 1;
    }
  }
  alert(cpt);
}

document.links est une collection qui n'appartient qu'au document et non à un élément quelconque. <edit>pour répondre à mekal</edit>

Tu aurais également pu faire l'approche suivante

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
 
//--------------------
// fonction generique
//--------------------
function getParent( elem, tag){
  var oParent = elem.parentNode;
  while( oParent){
   if( oParent.tagName == tag)
     return( true);
     oParent = oParent.parentNode;
  }
  return( false)
}
//--------------------
// Debut recherche
//--------------------
var oLink = document.links;
var nb = oLink.length;
var i, count = 0;
for( i=0; i < nb; i++){
  if( getParent( oLink[i], 'LI'))
    count++;
}
alert( count);

la différence est que l'on part des A et que l'on recherche le parent ultime du type choisi, plutôt que de partir du parent ultime et de récupérer ses enfants A.

La différence ?
le nombre d'itération, je n'est pas testé car cela va dépendre du type de document que l'on a à scruter. C'est une alternative.

Envoyé par jeremux

Merci Willpower, mais si le lien est fils d'un paragraphe et que ce paragraphe est fils d'un li alors il sera comptabilisé et ce n'est pas le résultat souhaité.

Par exemple pour ce code ça doit retourner 5:

si l'on tient compte de ce que tu écris alors un simple

Code :

1
2
3
4
5
6
7
8
var oLink = document.links;
var nb = oLink.length;
var i, count = 0;
for( i=0; i < nb; i++){
  if( oLink[i].parentNode.tagName=='LI')
    count++;
}
alert( count);

<edit>cela tombe bien, Willpower, on a répondu la même chose, mais pourquoi ne pas utiliser la collection document.links quand on recherche directement dans le document</edit>

[Willpower]

Envoyé par NoSmoking

<edit>cela tombe bien, Willpower, on a répondu la même chose, mais pourquoi ne pas utiliser la collection document.links quand on recherche directement dans le document</edit>

parce que je ne connaissais pas

[mekal]

document.links est une collection qui n'appartient qu'au document et non à un élément quelconque. <edit>pour répondre à mekal</edit>

j'avait jamais essayer document.links et j'aurais pensé que sa pouvait fonctionner sur un element et bas maintenant je sais que non

[NoSmoking]

Envoyé par Willpower

parce que je ne connaissais pas

il existe au moins 4 collections mondialement connues, enfin presque..
- forms, celle la est surement la plus connue et la plus utilisée
- images, qui tombe en désuétude, mais qui peut rendre de grand service de mise en page notamment
- links, celle la elle est presque complètement oubliée à en voir les forums, et pourtant bien utile également
- anchors que plus personne ne connaît ou presque.

une mise en garde toutefois, IE n'accepte pas document.links('name_du_lien') alors que les autres oui...et encore plein de petit détail

A quoi cela sert que les navigateur se décarcasse?

[dukej]

Même si la solution JS pure a été donnée, je donne quand même la mienne

Code :

1
2
3
4
5
6
7
8
9
10
11
 
/**
 * Compte le nombre de A qui sont obligatoirement dans un LI par rapport à un élément parent
 * @param elm {Element} Element parent
 * @return {Number} Nombre de A contenus dans un LI
 */
function count(elm) {
    return Array.prototype.slice.call(elm.getElementsByTagName('a')).filter(function(a) {
        return a.parentNode.nodeName == "LI";
    }).length;
}

Je transforme la nodeList (qui n'est pas un Array) en Array afin d'avoir la méthode filter. Et j'utilise cette méthode pour n'avoir dans mon Array que les A qui sont fils directs d'un LI.
Cette méthode peut-être performante si filter est natif.
note : Cette solution ne fonctionne pas sous IE6, IE7 car ils implémentent une vieille version de Javascript (JS 1.5).

Sinon avec des librairies on le fait en une ligne aussi :

Code :

1
2
3
4
5
6
7
8
9
10
11
 
// pour tout le document (même code pour la plupart des librairies (mootools, jquery...)
$$('li > a').length;
 
//si on part d'un élément
//mootools
$(elm).getElements('li > a').length;
//jquery
$(elm).find('li > a').length;
//prototype JS
$(elm).select('li > a').length;

Désolé fallait que je m'occupe un peu ce matin

[Loceka]

Envoyé par Willpower

Code js :

En gros c'est exactement ce que j'ai dit au 2ième post...

C'est quoi le proverbe avec le poisson et la pêche déjà ?

Envoyé par Willpower

ta solution ne comportant qu'une boucle est bien meilleure que la mienne.

Envoyé par NoSmoking

la différence est que l'on part des A et que l'on recherche le parent ultime du type choisi, plutôt que de partir du parent ultime et de récupérer ses enfants A.

La différence ?
le nombre d'itération, je n'est pas testé car cela va dépendre du type de document que l'on a à scruter. C'est une alternative.

C'est en effet une solution alternative mais qui n'est pas "bien meilleure" à l'approche par les li.

D'accord y'a pas de boucle imbriquée mais statistiquement ça fera plus d'itération (or c'est le nombre d'itération qui fait la complexité) qu'une boucle imbriquée sur les li :

• Une page web standard contient généralement pas mal de liens
• Une page est généralement peu chargée en li (sémantiquement, ils dénotent une liste d'élément)
• Les élément li sont généralement des "feuilles" (il y'a rarement une arborescence importante qui en dépend)
• Il ne s'intéresse qu'au liens directement dépendant d'un li, ce qui évite de parcourir la sous-arborescence des li

Donc comme le dit NoSmoking, ça dépend du style de document : dans le cas d'une table des matière ce sera équivalent, dans le cas d'un listing il sera préférable de parcourir les "a", dans une page standard (avec un header, un menu, des rubriques, un footer) il sera préférable de parcourir les "li".

Bon, je dis ça sans avoir fait d'étude préalable mais je suis persuadé que si on choisi 10000 sites au hasard et qu'on fait le ratio a vs li sur chacune de leurs pages, ça devrait corroborer ce que je dis.

PS :
La page actuelle contient 440 <a et 113 <li>, chaque <li> contient un seul et unique fils, ce fils est soit un <a>, soit un <span>, soit un élément texte. Soit une complexité de 113 vs 440. ^_^

[dukej]

Envoyé par Loceka

En gros c'est exactement ce que j'ai dit au 2ième post...

C'est quoi le proverbe avec le poisson et la pêche déjà ?




C'est en effet une solution alternative mais qui n'est pas "bien meilleure" à l'approche par les li.

D'accord y'a pas de boucle imbriquée mais statistiquement ça fera plus d'itération (or c'est le nombre d'itération qui fait la complexité) qu'une boucle imbriquée sur les li :

• Une page web standard contient généralement pas mal de liens
• Une page est généralement peu chargée en li (sémantiquement, ils dénotent une liste d'élément)
• Les élément li sont généralement des "feuilles" (il y'a rarement une arborescence importante qui en dépend)
• Il ne s'intéresse qu'au liens directement dépendant d'un li, ce qui évite de parcourir la sous-arborescence des li

Donc comme le dit NoSmoking, ça dépend du style de document : dans le cas d'une table des matière ce sera équivalent, dans le cas d'un listing il sera préférable de parcourir les "a", dans une page standard (avec un header, un menu, des rubriques, un footer) il sera préférable de parcourir les "li".

Bon, je dis ça sans avoir fait d'étude préalable mais je suis persuadé que si on choisi 10000 sites au hasard et qu'on fait le ratio a vs li sur chacune de leurs pages, ça devrait corroborer ce que je dis.

Oui mais il faudra ensuite détecter les A et regarder si ils sont fils directs de LI. Et ça même avec un getElementsByTagName, tu devras parcourir tous les A du LI en question.

Ensuite oui ta solution est plus rapide :o, mais si ta page ne se comporte d'un menu en liste, tu peux être sur que ta solution ne sera pas aussi performante .
Surtout que tu relances un getElementByTagName pour chaque LI.

enfin bon, j'avoue que c'est du pinaillage

[Willpower]

Effectivement Loceka, ta méthode même si dans certains cas est plus rapide (ou peut être plus rapide... je n'ai non plus aucun teste ni théorie pour me baser) je pense que dans la généralité des cas elle sera plus lente. D'autant plus que comme le dit dukej, les appels en boucle de getElementByTagName vont renvoyer à chaque fois un nouveau "Array" contenant les A du LI. Et il me semble que cette création d'array(+ parcours?) va faire perdre "beaucoup" au niveau de performances. (mais ce n'est effectivement qu'une intuition, basé sur rien d'autre.).


ps: sinon bien vu quand même, je n'avais même pas vu que dans certains cas le nombre d'itérations serait moindre.

[jeremux]

Merci à tous! Grâce à vous j'ai pu comprendre l'erreur et apprendre aussi des choses. J'apprécie également les liens fournis par Loceka, ça me permet d'approfondir mon cours.

PS: Désolé du retard de réponse!

A bientôt!

Jeremux