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>第一个父级（或第二个，就此而言）之后的标签？基本上选择一个<li>withclass="parent"和以下兄弟姐妹，直到它到达另一个<li>与父类。

我可以用嵌套列表重组列表，但我不想这样做。有什么建议么？

4

7 回答 7

11

实际上，您可以使用 nextUntil() 轻松完成此操作。无需编写自己的“nextUntil”，因为它已经存在。

前任。-

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

或如文森特建议的那样 -

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

您的问题的根源在于，<li>您归类为父级的<li>s 确实不是它们“下方”的父级。他们是兄弟姐妹。jQuery 有很多很多可以与实际父母一起使用的函数。我建议修复你的标记，真的。与使用 jQuery 拼凑一些东西相比，它会更快、更干净、更易于维护并且在语义上更正确。

于 2009-06-04T12:51:00.230 回答
2

我认为没有使用 each 的方法可以做到这一点，因为任何其他选择器也将选择第二个父级和它的下一个兄弟姐妹。

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 
<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 回答
0

我知道这是一个非常古老的线程，但 Jquery 1.4 有一个名为 nextUntil 的方法，它可能对此有用： http ://api.jquery.com/nextUntil/

于 2011-03-29T18:35:47.917 回答