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

这是一个duplicate问题。（还有here）

但最简单的是给出一个'父级'，然后像这样添加孩子：

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

您可以在this jsFiddle中找到此实现。

jQuery实施

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

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

可以找到演示here。

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

Answer 3

这可能不是最佳解决方案，但可行。

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

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

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

3 个答案: