jquery suivant les frères et sœurs

J'ai essayé d'obtenir ce problème résolu, mais je n'arrive pas à comprendre sans une grave solutions de contournement.

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 dois-je maintenant, il suffit de sélectionner le <li> les balises suivant le premier parent (ou le deuxième, d'ailleurs)? Fondamentalement, la sélection d'un <li> avec class="parent" et suivants frères et sœurs jusqu'à ce qu'il atteigne l'autre <li> avec la classe parent.

J'ai pu restructurer la liste les listes imbriquées, mais je ne veux pas le faire. Toutes les suggestions?

OriginalL'auteur Contra | 2009-06-04

6

La racine de votre problème, c'est que le <li>s vous avez classé en tant que parent ne sont PAS vraiment les parents de la <li>s "en-dessous". Ils sont frères et sœurs. jQuery a beaucoup, beaucoup de fonctions qui fonctionnent avec de véritables parents. Je vous suggère de fixation de votre balisage, vraiment. Ce serait plus rapide, plus propre, plus facile à maintenir et plus sémantiquement correct que l'utilisation de jQuery pour bricoler quelque chose ensemble.

Je suis d'accord avec cela, cependant, j'ai posté une solution potentielle. Il serait beaucoup plus facile si les DOM relations correspondait à la réalité de relations.
ouais, en fait, je pensais au "parent" classname a un peu de mal, après je l'ai posté. en l'appelant "en-tête" peut-être mieux. J'ai peut-être utiliser des listes imbriquées après tout
Je pense que dans le long terme, c'est la meilleure approche. Je sais que vous ne voulez pas le refaire maintenant, mais vous vous remercierez plus tard.
Je devrais ai refait d'abord, lorsque j'ai remarqué que le difficuly de choisir les éléments que je voulais, étant donné que le travail de refaire le balisage est beaucoup moins de travail puis de battre mon code jquery à la mort 🙂 leçon apprise.

OriginalL'auteur Mark Hurd
11

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

ex. -
```
$(".a").nextUntil(".b");
```
ou comme suggéré par Vincent -
```
$(".parent:first").nextUntil(".parent");
```
Ce n'existait pas avant la version 1.4 de jQuery, qui est passé un peu après l'heure de la question. Mais oui, cela fonctionne maintenant 🙂

OriginalL'auteur The Merovingian
2

Je ne pense pas qu'il y a un moyen de le faire sans l'aide de chaque puisque les autres sélecteurs sera également sélectionner le deuxième parent et c'est à côté de la fratrie.
```
function getSibs( elem ) {
    var sibs = [];
    $(elem).nextAll().each( function() {
        if (!$(this).hasClass('parent')) {
            sibs.push(this);
        }
        else {
            return false;
        }
    });
    return $(sibs);
 }
```
frissonner Excellente idée, mais wow, j'avais hate de l'utiliser moi-même. 🙂
haha, en fait, c'est veery proche de la solution de contournement im en utilisant un guichet automatique 🙂 honte

OriginalL'auteur tvanfosson

Vous devrez exécuter la boucle vous-même depuis jQuery ne sait pas comment l'arrêter sur 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 pourriez être mieux avec une très structurée liste pour votre parent/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>

Yep, j'ai réalisé maintenant que c'est plus propre. Aussi beaucoup plus facile de travailler avec, comme quelqu'un l'a mentionné. J'ai juste pensé qu'il y avait certains sélecteur de magie, je ne pourrais pas comprendre, mais Il semble qu'il n'est pas possible sans manipuler le tableau par la suite.

OriginalL'auteur Vincent Robert

0
```
$("li.parent ~ li");
```
$("li.parent ~ li:pas(li.parent)"); <<<<< cela laissera la sortie de la prochaine class="parent". Il ne s'arrête pas à ce point....
ouais j'ai juste écrit que exactement le même code, mais comme vous l'avez mentionné qu'il ne marche pas s'arrêter lorsqu'il atteint la prochaine class=parent

OriginalL'auteur Ropstah
0

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

OriginalL'auteur kthiagar

<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>

OriginalL'auteur John Guise

Vous devez vous connecter pour publier un commentaire.