jquery prochaine frères et sœurs

J'ai essayé de résoudre ce problème, mais je n'arrive pas à le résoudre sans certaines solutions de contournement sérieuses.jquery prochaine frères et sœurs

si j'ai le code HTML suivant:

<ul> 
    <li class="parent"> headertext </li> 
    <li> text </li> 
    <li> text </li> 
    <li> text </li> 
    <li class="parent"> headertext </li> 
    <li> text </li> 
    <li> text </li> 
</ul>

Maintenant, comment puis-je maintenant il suffit de sélectionner les balises suivantes <li> le premier parent (ou deuxième, pour cette question)? Fondamentalement en sélectionnant un <li> avec class="parent" et les frères et sœurs suivants jusqu'à ce qu'il atteigne un autre <li> avec la classe parente.

Je pourrais restructurer la liste avec des listes imbriquées, mais je ne veux pas faire cela. Aucune suggestion?

Source

2009-06-04 Contra

La racine de votre problème est que les <li> s que vous avez classés en tant que parent ne sont vraiment pas les parents du <li> s « ci-dessous » eux. Ils sont frères et sœurs. jQuery a beaucoup, beaucoup de fonctions qui fonctionnent avec les parents réels. Je suggère de réparer votre balisage, vraiment. Ce serait plus rapide, plus propre, plus facile à maintenir, et plus sémantiquement correct que d'utiliser jQuery pour paver quelque chose ensemble.

Source

2009-06-04 12:51:00

Je suis d'accord avec cela, cependant, j'ai posté un solution potentielle. Ce serait beaucoup plus facile si les relations DOM correspondaient aux relations réelles. – tvanfosson

ouais, en fait, j'ai pensé que le nom de classe "parent" était un peu faux après que je l'ai posté. l'appeler "en-tête" pourrait être mieux. Je pourrais avoir à utiliser des listes imbriquées après tout – Contra

Je pense qu'à long terme c'est la meilleure approche. Je sais que vous ne voulez pas le refaire maintenant, mais vous pouvez vous remercier plus tard. –

$("li.parent ~ li");

Source

2009-06-04 12:46:33 Ropstah

$ ("li.parent ~ li: not (li.parent)"); <<<<< cela laissera le prochain class = "parent" s. Il ne s'arrête pas à ce point cependant .... – Ropstah

ouais je viens d'écrire exactement le même code, mais comme vous l'avez mentionné, il ne s'arrête pas quand il atteint la classe suivante = parent – Contra

Je ne pense pas qu'il y ait un moyen de faire cela sans utiliser chacun puisque tous les autres sélecteurs sélectionneront également le deuxième parent et ses frères et sœurs suivants.

function getSibs(elem) { 
    var sibs = []; 
    $(elem).nextAll().each(function() { 
     if (!$(this).hasClass('parent')) { 
      sibs.push(this); 
     } 
     else { 
      return false; 
     } 
    }); 
    return $(sibs); 
}

Source

2009-06-04 12:51:55 tvanfosson

* frissonne * Bonne idée, mais bon sang, je détesterais l'utiliser moi-même. :) –

haha, en fait, c'est très proche de la solution de contournement im en utilisant atm :) * honte * – Contra

Vous devrez exécuter la boucle vous-même car jQuery ne sait pas s'arrêter à une condition spécifique.

jQuery.fn.nextUntil = function(selector) 
{ 
    var query = jQuery([]); 
    while(true) 
    { 
     var next = this.next(); 
     if(next.length == 0 || next.is(selector)) 
     { 
      return query; 
     } 
     query.add(next); 
    } 
    return query; 
} 

// To retrieve all LIs avec a parent 
$(".parent:first").nextUntil(".parent");

mais vous pouvez mieux utiliser une liste vraiment structurée pour vos parents/enfants relation

<ul> 
<li class="parent"> <span>headertext</span> 
    <ul> 
    <li> text </li> 
    <li> text </li> 
    <li> text </li> 
    </ul> 
</li> 
<li class="parent"> <span>headertext</span> 
    <ul> 
    <li> text </li> 
    <li> text </li> 
    </ul> 
</li> 
</ul>

Source

2009-06-04 13:02:41

Oui, je me suis rendu compte maintenant que c'est plus propre. Aussi beaucoup plus facile de travailler avec, comme quelqu'un l'a mentionné. Je pensais juste qu'il y avait une certaine magie de sélection que je ne pouvais pas comprendre, mais il semble que ce n'est pas possible sans manipuler le tableau après. – Contra

<html> 
    <head> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("a").click(function() { 
        var fred = $("li").not('.parent').text(); 
        $('#result').text(fred);   
       }); 
      });   
     </script> 
    </head> 
    <body> 
     <a href="#">Click me</a> 
     <ul> 
      <li class="parent"> headertextA </li> 
      <li> text1 </li> 
      <li> text2 </li> 
      <li> text3 </li> 
      <li class="parent"> headertextB </li> 
      <li> text4 </li> 
      <li> text5 </li> 
     </ul> 
     <div id="result"></div> 
    </body> 
</html>

Source

2010-06-07 00:09:45

En fait, vous pouvez facilement le faire en utilisant nextUntil(). pas besoin d'écrire votre propre "nextUntil" car il existe déjà.

ex. -

$(".a").nextUntil(".b");

ou comme suggéré par Vincent -

$(".parent:first").nextUntil(".parent");

Source

2010-08-11 09:45:01

Cela n'existait pas avant la version 1.4 de jQuery, qui a chuté un peu après l'heure de la question. Mais ouais, ça va marcher maintenant :) – Contra

Je sais que c'est un fil très ancien, mais Jquery 1.4 a une méthode appelée nextUntil, ce qui pourrait être utile à cet effet: http://api.jquery.com/nextUntil/

Source

2011-03-29 18:35:47 kthiagar

Répondre

Questions connexes