JavaScript suivant frère ou sœur?

Quelqu'un pourrait-il me montrer comment faire une boucle dans les balises d'ancrage dans un div et trouver le prochain frère?JavaScript suivant frère ou sœur?

J'ai ceci jusqu'à présent.

var menu = document.getElementById('menu'); 
var links = menu.getElementsByTagName('a');

Comment faire une boucle dans les liens? Puis-je utiliser .nextSibling pour trouver si le prochain frère est un div?

Source

2010-10-29 JasonS

Vous feriez mieux d'utiliser une bibliothèque JavaScrip, jQuery par exemple – infinity

je ne peux pas dans cette situation, généralement je le ferais. Cela montre juste ma dépendance sur ces bibliothèques ... – JasonS

Le prochain frère de quoi? –

La propriété nextSibling des DOM noeuds fonctionne parfaitement dans tous les navigateurs et fait exactement ce que vous attendez. S'il n'y a pas de frère suivant, il renvoie null.

L'itération sur un NodeList (qui correspond à getElementsByTagName) est identique à l'itération sur un ensemble à l'aide d'une boucle for standard. Ce qui suit itérer sur les liens et alerter chaque fois qu'il en trouve un qui est un frère suivant <div>:

var menu = document.getElementById('menu'); 
var links = menu.getElementsByTagName('a'); 

// Iterate over the links 
for (var i = 0, len = links.length, link; i < len; ++i) { 
    link = links[i]; 
    if (link.nextSibling && link.nextSibling.nodeName == "DIV") { 
     alert("Next sibling is DIV! " + link.innerHTML); 
    } 
}

Notez que dans les navigateurs non-IE, les espaces entre les éléments en HTML est considéré comme un nœud de texte. Vous voudrez peut-être ignorer ces nœuds d'espaces blancs en considérant le prochain frère de chaque lien. Ce qui suit faire:

function isWhitespace(node) { 
    return node.nodeType == 3 && /^\s*$/.test(node.data); 
} 

// Iterate over the links 
for (var i = 0, len = links.length, link, next; i < len; ++i) { 
    link = links[i]; 
    next = link.nextSibling; 
    if (next && isWhitespace(next)) { 
     next = next.nextSibling; 
    } 
    if (next && next.nodeName == "DIV") { 
     alert("Next sibling is DIV! " + link.innerHTML); 
    } 
}

Source

2010-10-29 12:08:11

Cette solution est presque correcte. Cependant, il ne prend pas en compte le nœud A tags Text. Voici un JSFiddle démontrant: http://www.jsfiddle.net/subhaze/ytCxS/ – subhaze

@subhaze: Eh bien, je suppose que vous pourriez dire que c'était incorrect pour cette raison, mais un nœud de texte est toujours un nœud autant que tout autre noeud, même s'il ne contient que des espaces. Le vrai problème est que IE ne compte pas les nœuds textuels des espaces comme des nœuds DOM réels, contrairement à tous les autres navigateurs. Cela vaut vraiment la peine d'être souligné, alors je vais modifier ma réponse. –

@subhaze: Amended ma réponse. Je pense que vous voudriez seulement ignorer les nœuds de texte d'espaces, pas n'importe quel nœud de texte (comme dans votre exemple jsfiddle). –

for(var i=0; i<links.length; i++) {  
if (links[i].nextChild.nodeName=="DIV") 
    alert("This is a DIV") 
}

Source

2010-10-29 12:04:58 infinity

nextChild n'est pas une propriété d'un nœud: https://developer.mozilla.org/en/DOM/Node – subhaze

JavaScript suivant frère ou sœur?

Répondre

Questions connexes