3

私はこの問題を解決しようとしてきましたが、いくつかの深刻な回避策がなければ解決できないようです.

次の 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>では、最初の親 (または 2 番目の親) に続くタグを選択するにはどうすればよいでしょうか? 基本的に、親クラスを持つ別のクラスに到達するまで、 <li>withと次の兄弟を選択します。class="parent"<li>

ネストされたリストを使用してリストを再構築することはできますが、そうしたくありません。助言がありますか？

4

7 に答える 7

11

実際、nextUntil（）を使用してこれを簡単に行うことができます。すでに存在するため、独自の「nextUntil」を作成する必要はありません。

元。-

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

またはVincentによって提案されたように-

$(".parent:first").nextUntil(".parent");
于 2010-08-11T09:45:01.837 に答える
6

問題の根本は、親として分類したs が実際には「下」の s の<li>親ではないことです。<li>彼らは兄弟です。jQuery には、実際の親と連携する非常に多くの関数があります。マークアップを修正することをお勧めします。jQuery を使用して何かをまとめるよりも、迅速で、クリーンで、保守が容易で、意味的にも正しいでしょう。

于 2009-06-04T12:51:00.230 に答える
2

each を使用せずにこれを行う方法はないと思います。他のセレクターも2番目の親を選択し、それが次の兄弟であるためです。

function getSibs( elem ) {
    var sibs = [];
    $(elem).nextAll().each( function() {
        if (!$(this).hasClass('parent')) {
            sibs.push(this);
        }
        else {
            return false;
        }
    });
    return $(sibs);
 }
于 2009-06-04T12:51:55.907 に答える
1

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>
于 2009-06-04T13:02:41.267 に答える
0 
$("li.parent ~ li");
于 2009-06-04T12:46:33.077 に答える
0

これが非常に古いスレッドであることは知っていますが、Jquery 1.4 には nextUntil というメソッドがあり、この目的に役立つ可能性があります: http://api.jquery.com/nextUntil/

于 2011-03-29T18:35:47.917 に答える
0 
<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>
于 2010-06-07T00:09:45.753 に答える