Comment sélectionner tout le contenu entre deux des mêmes tags?

Question

A similar question was asked before, mais je suis à la recherche d'une solution jQuery en utilisant uniquement le code html ci-dessous (c.-à-pas de classes ou attributs id.):

<h2>Foo</h2> 
<p>asdf</p> 
<ul><li>asdf</li></ul> 
<p>asdf</p> 
<h2>Bar</h2> 
<p>asdf</p> 
<p>asdf</p> 
<h2>Baz</h2> 
<p>asdf</p> 
<p>asdf</p> 

Je voudrais utiliser une jQuery comme:

$('h2').afterButBeforeNext('h2').doSomething(); 

Cela devrait:

• sélectionner tous les éléments frères après l'élément spécifié, mais avant la prochaine occurrence de l'élément spécifié.
• S'il n'y a pas d'élément final, sélectionnez tous les éléments en dessous.

Answer 1

solution la plus simple en utilisant les principales fonctions jQuery:

$('h2').nextUntil('h2').doSomething(); 

Jonathan Snook m'a fait la fonction jQuery 1.4 qui permet de résoudre ceci:

• nextUntil()

Vérifier les fonctions sur ce: des frères et sœurs

• prevUntil
• parentsUntil

Inspirée par:

• nextAll
• prevAll

Answer 2

Que pensez-vous de cela?

function selectBetween(node1,node2,parent) 
{ 
    var p = $(parent); 
    var n1 = p.find(node1); 
    var n2 = p.find(node2); 
    var results = []; 
    var start = false; 
    var end = false; 
    p.children().each(function() 
    { 
     if(!start && !end) 
     { 
      if($(this) === n1) 
      { 
       start = true; 
      } 
      results.push(this); 
      if($(this) === n2) 
      { 
       end = true; 
       return; 
      } 
     } 
    }); 
    return results; 
} 
var between = selectBetween($(parent).find('h2:first'), $(parent).find('h2:last'), parent); 

Answer 3

Le sélecteur prev devrait être en mesure de le faire: http://docs.jquery.com/Selectors/siblings#prevsiblings

$("h2 ~ *:not(h2)").doSomething(); 

Vous avez encore besoin d'une sorte id ou attribut pour sélectionner seulement un seul élément h2.

Answer 4

Pour démontrer, le contenu de la balise h2 devient rouge et le p, le contenu de la balise ul devient vert:

$('#container').children().each(function(){ 
    if(this.nodeName == 'H2'){ 
     $(this).css('color','red'); 
     $(this).nextAll().each(function(){ 
      if(this.nodeName != 'H2'){ 
       $(this).css('color','green'); 
      } 
     });   
     return false; //exit here to only process the nodes between the first H2 and second H2 found. 
    } 
}); 

Notez que je suppose un #container div non représentée dans votre exemple. S'il n'y a pas de conteneur, utilisez $ (body) .children().

Answer 5

Vous pouvez faire quelque chose comme ceci:

var name = "h2"; 
$(name).each(function() { 
    var siblings = [], sibling=this.nextSibling; 
    while (sibling && sibling.nodeName.toLowerCase() != name) { 
     siblings.push(sibling); 
     sibling = sibling.nextSibling; 
    } 
    // siblings now contains an array of sibling elements that are not h2 
});