是否有一个 jQuery 选择器来完成这个任务？答案

【问题标题】：Is there a jQuery selector to accomplish this task?是否有一个 jQuery 选择器来完成这个任务？
【发布时间】：2011-03-09 15:15:02
【问题描述】：

我有这 4 个 HTML sn-ps：

兄弟姐妹：

<div class="a">...</div>
<div class="b">...</div>        <!--selected-->
<div class="b">...</div>        <!--not selected-->

包装1：

<div class="a">...</div>
<div>
    <div class="b">...</div>    <!--selected-->
</div>
<div class="b">...</div>        <!--not selected-->

包装2：

<div>
    <div class="a">...</div>
</div>
<div>
    <div class="b">...</div>    <!--selected-->
</div>
<div class="b">...</div>        <!--not selected-->

分开：

<div class="a">...</div>
<div>...</div>
<div class="b">...</div>        <!--selected-->
<div>...</div>
<div class="b">...</div>        <!--not selected-->
<div>...</div>
<div class="b">...</div>        <!--not selected-->

如何使用 jQuery 为任何给定的 .a 元素选择下一个 .b 元素，而不管嵌套如何？

我想要这样的东西：

$('.a').each(function() {
    var nearestB = $(this)./*Something epically wonderful here*/;

    //do other stuff here
});

【问题讨论】：

下一个 b 的嵌套深度是否有限制？
可能，但我更喜欢通用解决方案。
您能否更新您的示例以显示可以有许多 .bs 的事实（而不是 .as 的 1:1）？

标签： javascript jquery jquery-traversing

【解决方案1】：

你可以试试这个，看看它是否适合你的情况？

    $(document).ready(function () {
        var isA = false;

        $('div.a, div.b').each(function () {
            if ($(this).attr('class') == "a")
                isA = true;
            if ($(this).attr('class') == "b" && isA) {
                $(this).css("background", "yellow");
                isA = false;
            }
        });
    });

问候...

【讨论】：

是的！这样可行。尽管我认为您可能只是将我推向了更好的方法。
那是件好事！也许可以稍微改进一下（将 .attr('class') == "a" 更改为 .hasClass("a") 等）以使其更好......干杯！
好的，我有一个解决方案here，感觉不像作弊（即不改变变量）。不过，你的看起来效率更高。

【解决方案2】：

知道了！

var both = $('.a, .b');

$('.a').each(function() {
    var nearestB = both.slice(both.index(this))
                       .filter('.b')
                       .first();

    //do stuff
});

【讨论】：

将自己的答案标记为已接受是完全可以接受的：meta.stackexchange.com/questions/12513/…
确实如此。但是，我无法确定我的答案是否比 Padel 的更好。

【解决方案3】：

您如何决定选择哪个.a？是否有永远的.b .a？你在每个循环吗？您可以使用.a 的索引并简单地选择对应的.b。

$(".a").each(function(){
    var index = $(".a").index(this);
    var theB = $(".b").get(index);
});

【讨论】：

每个.a都有一个.b。对于每个.b，没有一个.a。所以不幸的是，这行不通。所有a. 都会被选中。请参阅我更新的问题。

【解决方案4】：

好的，这是 Padel 解决方案的修改版本，其行为略有不同

var lastA = null;

$('.a, .b').each(function() {
    if($(this).hasClass('a'))
    {
        lastA = $(this);
    }
    else if(lastA)
    {
        doStuff(lastA,this); //doStuff(a,b)
        lastA = null;
    }
});

【讨论】：

我更喜欢你自己以前的答案，因为它允许在每个元素的基础上使用，而不是在所有元素上只使用一次。我的意思是它可以通过查找来适应悬停工作下一个.b 元素，而这个元素不能轻易适应这种情况..

【解决方案5】：

$("div.a").nextAll("div.b")

这行得通吗？

【讨论】：