jquery nächsten Geschwister

Ich habe versucht, dieses problem gelöst, aber ich kann nicht scheinen, um es herauszufinden, ohne ernsthafte workarounds.

wenn ich den folgenden HTML-Code:

<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 kann ich nun wählen Sie einfach die <li> tags nach dem ersten Eltern - (oder zweite, für diese Angelegenheit)? Grundsätzlich ist die Auswahl eines <li> mit class="parent" und die folgenden Geschwister, bis es erreicht einen weiteren <li> mit der übergeordneten Klasse.

Konnte ich die Umstrukturierung der Liste mit verschachtelten Listen, aber ich will nicht zu tun. Irgendwelche Vorschläge?

InformationsquelleAutor Contra | 2009-06-04

6

Die Wurzel des Problems ist, dass die <li>s Sie gelten als Eltern-sind wirklich NICHT Eltern der <li>s "unten". Sind Sie Geschwister. jQuery hat viele, viele Funktionen, dass die Arbeit mit den tatsächlichen Eltern. Ich würde vorschlagen, Befestigung für das markup, wirklich. Es wäre schneller, sauberer, einfacher zu pflegen, und mehr semantisch korrekt als die Verwendung von jQuery zu Schustern was zusammen.

Ich Stimme mit diesem, obwohl, ich habe eine mögliche Lösung. Es wäre viel einfacher, wenn die DOM-Beziehungen entsprachen den tatsächlichen Beziehungen.
ja, tatsächlich, ich dachte die "Eltern" classname war ein bisschen falsch, nachdem ich es gepostet. er nannte Sie "header" könnte besser sein. Ich kann verschachtelte Listen, nachdem alle
Ich denke, langfristig ist das der bessere Ansatz. Ich weiß, Sie wollen nicht, es zu wiederholen nun, aber danken Sie sich später.
Sollte ich erneuert habe es auf den ersten, wenn ich bemerkte, die difficuly auf die Auswahl der Elemente, die ich wollte, da die Arbeit nochmal das markup ist viel weniger Arbeit, dann schlagen meine jquery-code zum Tod :), die Lektion gelernt.

InformationsquelleAutor Mark Hurd
11

tatsächlich, Sie können ganz einfach tun dies mit nextUntil().
keine Notwendigkeit zu schreiben, Ihre eigenen "nextUntil", da es bereits vorhanden ist.

ex. -
```
$(".a").nextUntil(".b");
```
oder wie vorgeschlagen von Vincent -
```
$(".parent:first").nextUntil(".parent");
```
Dies existierte nicht vor der version 1.4 von jQuery, das ging ein wenig nach der Zeit die Frage. Aber ja, das funktioniert jetzt 🙂

InformationsquelleAutor The Merovingian
2

Ich glaube nicht, dass es einen Weg gibt, dies zu tun, ohne mit jedem, da jeder der übrigen Selektoren wählen Sie auch den zweiten Elternteil und die nächsten Geschwister.
```
function getSibs( elem ) {
    var sibs = [];
    $(elem).nextAll().each( function() {
        if (!$(this).hasClass('parent')) {
            sibs.push(this);
        }
        else {
            return false;
        }
    });
    return $(sibs);
 }
```
Gruseln Tolle Idee, aber geez, ich würde es hassen, um ihn selbst zu benutzen. 🙂
haha, das ist eigentlich veery in der Nähe der Problemumgehung im mit atm 🙂 Schande

InformationsquelleAutor tvanfosson

Wird die Schleife sich da jQuery nicht wissen, wie zu stoppen, die auf eine bestimmte Bedingung.

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

Aber Sie kann besser sein, mit einem wirklich strukturierten Liste für das Eltern/Kinder-Beziehung

<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, ich erkannte nun, dass dies mehr sauber. Auch viel mehr einfach, mit zu arbeiten, als jemand erwähnt. Ich dachte nur, es waren einige Selektor-Zauberei konnte ich nicht herausfinden, aber Es scheint, es ist nicht möglich, ohne Manipulation das array danach.

InformationsquelleAutor Vincent Robert

0
```
$("li.parent ~ li");
```
$("li.Eltern ~ li:not(li.parent)"); <<<<< hierdurch wird die nächste class="parent". Es muss nicht an diesem Punkt stoppen, jedoch....
ja, ich schrieb eben, dass genau die gleiche code, aber wie du schon erwähnt hast, es nicht aufhören, wenn es erreicht die nächste Klasse=parent

InformationsquelleAutor Ropstah
0

Ich weiß, das ist ein sehr Alter thread, aber Jquery 1.4 hat eine Methode namens nextUntil, die nützlich sein könnte für diesen Zweck:
http://api.jquery.com/nextUntil/

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

InformationsquelleAutor John Guise

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.