jquery prochains frères et soeurs

StackOverflow https://stackoverflow.com/questions/950331

Question

Je l'ai essayé d'obtenir ce problème résolu, mais je ne peux pas sembler figurer dehors sans quelques solutions de contournement graves.

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 <li> suivant le premier parent (ou deuxième, pour cette question)? En fait le choix d'un <li> avec class="parent" et les frères et soeurs suivants jusqu'à ce qu'il atteigne une autre <li> avec la classe parente.

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

Était-ce utile?

La solution

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

Autres conseils

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");

Je ne pense pas qu'il y ait un moyen de le faire sans utiliser chacun depuis l'un des autres sélecteurs sélectionnera également le deuxième parent et il est frères et sœurs à venir. 

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

Vous devrez exécuter la boucle vous-même car jQuery ne sait pas comment 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 pouvez mieux utiliser une liste vraiment structurée pour votre relation parent / enfant 

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

$("li.parent ~ li");

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/ 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top