Vérifiez si l'élément est avant ou après un autre élément dans jQuery

Question

Supposons que j'ai ce balisage

 <h3 id="first">First</h3>
<p>Hi</p>
<p>Hello</p>
<h3 id="second">Second</h3>
<p>Bye</p>
<p>Goodbye</p>

Comment puis-je vérifier par programmation si un élément, tel que l'un des p s, est après le premier h3 et avant le deuxième h3 , avec jQuery ?

J'essaye de faire quelque chose comme ça :

 $(p).each(function(){
   if($(this).isAfter("#first") && $(this).isBefore("#second")) {
     // do stuff
   }
});

Answer 1

La solution de Rocket fonctionne bien si sel est un vrai sélecteur, si vous passez un objet jquery, cela ne fonctionnera pas.

Si vous voulez un plugin qui fonctionne à la fois avec les sélecteurs et les objets jquery, utilisez simplement ma version légèrement modifiée à la place :

 (function($) {
    $.fn.isAfter = function(sel){
        return this.prevAll().filter(sel).length !== 0;
    };

    $.fn.isBefore= function(sel){
        return this.nextAll().filter(sel).length !== 0;
    };
})(jQuery);

Félicitations à Rocket pour la solution originale.

Answer 2

Vous pouvez utiliser la fonction index() :

 $('p').each(function(){
   var index = $(this).index();
   if(index > $("#first").index() && index < $("#second").index()) {
     // do stuff
   }
});

Answer 3

J'ai implémenté une fonction générale isAfter , qui prend en compte la profondeur et l'arbre DOM et peut déterminer correctement si a est après b même s'ils sont dans 2 sous-arbres différents :

 <div>
  <div>
    <p class="first">I come first</p>
  </div>
</div>

<div>
  <div>
    <p class="second">I come second</p>
  </div>
</div>

vous pouvez le trouver dans mon référentiel GitHub . J'apprécierais vos commentaires sur le code

Answer 4

Voici un violon

 $('p').each(function() {
    previousH3 = $(this).prevAll('h3');
    nextH3 = $(this).nextAll('h3');

    if (previousH3.length > 0 && nextH3.length > 0) {
        $(this).css('color', 'red')
    }

});