jquery nächste Geschwister

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

Frage

Ich habe versucht, dieses Problem gelöst zu bekommen, aber ich kann nicht scheinen, ohne einige ernsthaften Abhilfen, um herauszufinden.

wenn ich die folgende HTML: 

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

Nun, wie wähle ich jetzt nur die <li>-Tags nach dem ersten Elternteil (oder zweiten, was das betrifft)? Im Grunde eine <li> mit class="parent" auswählen und den folgenden Geschwistern, bis es ein anderes <li> mit der übergeordneten Klasse erreicht.

Ich könnte die Liste mit verschachtelten Listen umstrukturieren, aber ich möchte nicht, dass zu tun. Irgendwelche Vorschläge?

War es hilfreich?

Lösung

Die Wurzel des Problems ist, dass die <li>s Sie als Eltern wirklich eingestuft haben, sind nicht die Eltern der <li>s „unten“ sie. Sie sind Geschwister. jQuery hat viele, viele Funktionen, die mit dem tatsächlich Eltern arbeiten. Ich würde Ihre Markup Festsetzung wirklich vorschlagen. Es wäre schneller, leichter, sauberer zu halten und mehr semantisch korrekt als die Verwendung von jQuery gemeinsam etwas schustern.

Andere Tipps

tatsächlich, können Sie diese mit nextUntil leicht tun (). keine Notwendigkeit, Ihre eigene „nextUntil“ zu schreiben, da es bereits vorhanden ist.

ex. - 

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

oder wie von Vincent vorgeschlagen - 

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

Das glaube ich nicht, dass es eine Möglichkeit, dies da keines der anderen Selektoren ohne Verwendung jeder zu tun ist, wird auch den zweiten Elternteil wählen und es ist neben Geschwistern. 

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

Sie wird die Schleife selbst da jQuery nicht wissen muss laufen wie auf einem bestimmten Zustand zu beenden. 

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

Sie können aber besser, eine wirklich strukturierte Liste für Ihre Eltern / Kinder-Beziehung werden mit 

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

Ich weiß, dass dies ein sehr alter Thread, aber JQuery 1.4 hat eine Methode namens nextUntil, die für diesen Zweck nützlich sein könnte: 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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top