如何使用jQuery选择元素的所有前面的兄弟元素？

Question

假设我有一个带有以下内容的div：

<div id="divOne">
    <p>one</p>
    <p>two</p>
    <div id="aggregatedDiv"></div>
    <p> three </p>
</div>

那么有没有办法删除前三个元素？我不知道元素的数量。我只想删除id="aggregatedDiv"之前的所有内容，包括它本身。

我必须将结果作为html附加到其他div中。

$("#otherDiv").append(resultOfSlicedDivOneHtml);

- Luka Krajnc

Answer 1

您可以使用 .prevAll() 选择元素之前的所有兄弟元素，并使用 .addBack() 将前一个选择器 (#aggregatedDiv) 添加到当前选定元素集中。

$("#aggregatedDiv").prevAll().addBack().css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOne">
    <p>one</p>
    <p>two</p>
    <div id="aggregatedDiv">#</div>
    <p> three </p>
</div>

如果您想将所选元素添加到另一个元素中，请使用以下示例：

$("#aggregatedDiv").prevAll().addBack().appendTo("#divTwo");

#divTwo {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOne">
    <p>one</p>
    <p>two</p>
    <div id="aggregatedDiv">#</div>
    <p> three </p>
</div>
<div id="divTwo"></div>

- Mohammad

Answer 2

如上所述，您可以使用.prevAll()，但是您还需要使用.addBack()来实现您想要的效果：

$("#otherDiv").append($("#aggregatedDiv").prevAll().addBack());

- GONG

---

andSelf在jQuery 1.8中已被弃用，应改用addBack。另外，一个小问题是，这个答案只是从divOne中删除了元素，但并没有将它们添加到otherDiv中。 - ADyson

@ADyson 谢谢你的提示。我以前没有用过这个函数。我也修正了我的答案。 - GONG

Answer 3

这应该可以工作：

var elements = $("#aggregatedDiv").prevAll(); //gets everything before aggregatedDiv
elements = elements.add($("#aggregatedDiv")); //we want aggregatedDiv in the collection as well
$("#otherDiv").append(elements); //move them all into the other div

- ADyson