4
votes

Comment sélectionner le prochain frère d'un certain type avec JS?

J'ai du html

<h4 id="start-here">title</h4>
<p>paragraph</p>
<p>paragraph</p>
...some number of paragraphs... 
<a href="#" class="link">link</a>

Et j'ai le

avec l'id sélectionné dans JavaScript. Comment puis-je passer de cette sélection dans JS au premier qui fait partie du lien de classe, ou simplement à la balise d'ancrage de frère suivant?

javascript html

4 commentaires

document.querySelector ('# stat-here ~ a') renverra le premier frère d'ancre

Oui! Tu gères. Je vous remercie : )

@LGSon, vous devriez le poster comme réponse. C'est quelque chose que la plupart des développeurs JS débutants voudraient savoir.

@YongQuan D'accord ... alors je l'ai fait, merci.

3 Réponses :

7
votes

Utilisation de document.querySelector () code> et un sélecteur CSS, ici avec le frère général combinateur ~ , vous pouvez y parvenir comme ceci:

Une note d'accompagnement, dans les exemples ci-dessous, je cible le style en ligne, bien qu'il soit en général préférable de basculer une classe.

Extrait de pile

<h4 id="stat-here1">title</h4>
<div id="div1">some text</div>

<h4 id="stat-here2">title</h4>
<div id="div2">some text</div>

<h4 id="stat-here3">title</h4>
<div id="div3">some text</div>

(function(){

  var elements = document.querySelectorAll('#div2, #div3');

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red';
  }

})();

Mise à jour en fonction d'une autre question / commentaire, comment obtenir plus d'un élément en retour.

Avec document.querySelectorAll () on peut faire de même et cibler plusieurs éléments comme celui-ci.

Extrait de pile

<h4 id="stat-here">title</h4>
<p>paragraph</p>
<a href="#">link</a>
<p>paragraph</p>
<a href="#" class="link">link</a>

(function(){

  document.querySelector('#stat-here ~ a.link').style.color = 'red';

})();

0 commentaires

2
votes

Je pense commencer par le premier frère, puis je mets tous les frères et sœurs dans un tableau. J'extrais donc ce que vous voulez.

<h4 id="stat-here">title</h4>
<p>paragraph</p>
<p>paragraph</p>
<a href="#" class="link">link</a>

var x = document.getElementById("stat-here");
console.log(x)
var result = [],
    node = x.nextSibling;

while ( node ) {
    if (node.nodeType === Node.ELEMENT_NODE ) {
     result.push( node );
    }
    node = node.nextElementSibling || node.nextSibling;
}
console.log(result, '\n Result: ',result[result.length-2])

1 commentaires

Les réponses sans explication obtiennent généralement des votes négatifs et moins de votes positifs.

1
votes

L'ID "start-here" de votre élément facilite cette tâche. Mais imaginons que vous ayez une référence à un élément DOM sans un sélecteur aussi pratique, et que vous ne souhaitiez pas y ajouter un ID temporaire.

Dans ce cas, vous pouvez utiliser XPath avec document.evaluate et votre référence DOM comme deuxième argument. Supposons que vous ayez cette référence dans yourElement et que vous vouliez le prochain

frère

const nextSibling = document.evaluate("following-sibling::section", yourElement, null,
  XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue

0 commentaires