jquery 下一个兄弟姐妹

发布于 2024-07-23 08:12:23 字数 613 浏览 11 评论 0原文

我一直在努力解决这个问题，但如果没有一些认真的解决方法，我似乎无法解决这个问题。

如果我有以下 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>

现在，我现在如何选择第一个父级（或第二个父级）后面的

标记？基本上选择一个带有 class="parent" 的

和后面的同级，直到到达另一个带有父类的

。

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

原文

I've been trying to get this problem solved, but I can't seem to figure it out without some serious workarounds.

if I have the following 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>

Now, how do I now just select the <li> tags following the first parent (or second, for that matter)? Basically selecting an <li> with class="parent" and the following siblings until it reaches another <li> with the parent class.

I could restructure the list with nested lists, but I don't want to do that. Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风轻花落早 2024-07-30 08:12:23

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

前任。 -

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

或者按照文森特的建议 -

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

actually, you can easily do this using nextUntil().
no need to write your own "nextUntil" since it already exists.

ex. -

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

or as suggested by Vincent -

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

回复收藏 0 原文

公布 2024-07-30 08:12:23

问题的根源在于，您归类为父级的

实际上不是它们“下面”的

的父级。他们是兄弟姐妹。 jQuery 有很多很多可以与实际父母一起使用的功能。我真的建议修复你的标记。与使用 jQuery 拼凑一些东西相比，它更快、更干净、更容易维护，并且语义上更正确。

回复收藏 0 原文

何以畏孤独 2024-07-30 08:12:23

我认为没有办法在不使用每个选择器的情况下做到这一点，因为任何其他选择器也会选择第二个父级及其下一个兄弟姐妹。

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

I don't think there is a way to do this without using each since any of the other selectors will also select the second parent and it's next siblings.

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

回复收藏 0 原文

—━☆沉默づ 2024-07-30 08:12:23

您必须自己运行循环，因为 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>

You will have to run the loop yourself since jQuery does not know how to stop on a specific condition.

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

But you may be better using a really structured list for your parent/children relationship

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

残龙傲雪 2024-07-30 08:12:23

$("li.parent ~ li");

$("li.parent ~ li");

回复收藏 0 原文

吃→可爱长大的 2024-07-30 08:12:23

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

回复收藏 0 原文

伪装你 2024-07-30 08:12:23

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

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

~没有更多了~