JQuery ближайшие братья и сестры - PullRequest
Новая
       28

JQuery ближайшие братья и сестры

3 голосов
/ 04 июня 2009

Я пытался решить эту проблему, но я не могу понять это без каких-либо серьезных обходных путей.

если у меня есть следующий 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>

Теперь, как мне теперь просто выбрать теги <li>, следующие за первым родителем (или вторым, если на то пошло)? В основном, выбирая <li> с class="parent" и следующих братьев и сестер, пока не достигнет другого <li> с родительским классом.

Я мог бы реструктурировать список с помощью вложенных списков, но я не хочу этого делать. Какие-либо предложения?

Ответы [ 7 ]

11 голосов
/ 11 августа 2010

на самом деле, вы можете легко сделать это, используя nextUntil (). не нужно писать свой «nextUntil», так как он уже существует.

ех. - 

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

или по предложению Винсента - 

$(".parent:first").nextUntil(".parent");
6 голосов
/ 04 июня 2009

Корень вашей проблемы в том, что <li> s, которые вы классифицировали как родителя, на самом деле НЕ являются родителями <li> s "под" ними. Они братья и сестры. У jQuery есть много функций, которые работают с настоящими родителями. Я бы предложил исправить вашу разметку, правда. Это было бы быстрее, чище, проще в обслуживании и более семантически правильно, чем использование jQuery для объединения чего-либо.

2 голосов
/ 04 июня 2009

Я не думаю, что есть способ сделать это без использования каждого, так как любой из других селекторов также выберет второго родителя и его ближайших братьев и сестер. 

function getSibs( elem ) {
    var sibs = [];
    $(elem).nextAll().each( function() {
        if (!$(this).hasClass('parent')) {
            sibs.push(this);
        }
        else {
            return false;
        }
    });
    return $(sibs);
 }
1 голос
/ 04 июня 2009

Вы должны будете запустить цикл самостоятельно, так как jQuery не знает, как остановиться при определенном условии. 

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

Но вам может быть лучше использовать действительно структурированный список для ваших отношений между родителями и детьми 

<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>
0 голосов
/ 29 марта 2011

Я знаю, что это очень старый поток, но Jquery 1.4 имеет метод под названием nextUntil, который может быть полезен для этой цели: http://api.jquery.com/nextUntil/

0 голосов
/ 07 июня 2010 
<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>
0 голосов
/ 04 июня 2009 
$("li.parent ~ li");
...