jquery - 在当前集合旁边添加下一个项目和项目

Question

想象一下下面的 HTML

<div id="outer">
    <div id="elem1"></div>
    <div class="helperBtn"></div>
    <div class="helperBtn"></div>

    <div id="elem2"></div>
    <div class="helperBtn"></div>
    <div class="helperBtn"></div>

    <div id="elem3"></div>
    <div class="helperBtn"></div>
    <div class="helperBtn"></div>
</div>

如何一个选择elem2和两个跟随div.helperBtn的？
我尝试过这样的事情：$('#elem2').add(':next')但无法获得任何可行的解决方案。
有任何想法吗？

Answer 1

在您的情况下，您可以将nextUntil()与addBack( ) 一起使用：

var elements = $("#elem2").nextUntil("#elem3").addBack();

以上将匹配 和 之间的所有元素#elem2，#elem3然后添加#elem2回集合中。生成的 jQuery 对象将包含三个元素。

编辑：我在另一个关于这个解决方案被硬编码的答案中看到了合理的担忧。这是真的，但它可以很容易地修改，所以你只需要指定第一个元素：

var elements = $("#elem2").nextUntil(":not(.helperBtn)").addBack();

Answer 2

这是一个重复的问题。（也在这里）

但是最简单的是给一个“父”类，然后像这样添加孩子：

HTML

<div id="outer">
    <div class="parent" id="elem1"></div>
    <div class="helperBtn">helper 1.1</div>
    <div class="helperBtn">helper 1.2</div>

    <div class="parent" id="elem2"></div>
    <div class="helperBtn">helper 2.1</div>
    <div class="helperBtn">helper 2.2</div>

    <div class="parent" id="elem3"></div>
    <div class="helperBtn">helper 3.1</div>
    <div class="helperBtn">helper 3.2</div>
</div>

jQuery 示例

current = $('.parent').next();

alert(current.text()); //Selects first helperBtn

current = current.next();

alert(current.text()); //Selects second helperBtn

你可以在这个 jsFiddle中找到这个实现。

jQuery实现

$(".parent").each(function()
{
    current = $(this).next();
    alert(current.text()); //Selects first helperBtn

    current = current.next();
    alert(current.text()); //Selects second helperBtn               
});

在这里可以找到演示。

那应该可以帮助你！祝你好运！

Answer 3

这可能不是最好的解决方案，但确实有效。

$elem2 = $("#elem2");
$elemhelperButton = $elem2.next();
$elem2 = $elem2.add($elemhelperButton);
$elem2 = $elem2.add($elemhelperButton.next());

$elem2.click(function () {
  alert("hi there");
});