javascript - 如何在特定元素之后但另一个元素之前插入

Question

举例说明:

<li data-owner="1"></li>
<li data-id="1"></li>
<li data-id="2"></li>
(insert here)
<li data-owner="2"></li>

我想在data-owner="1"之间插入和data-owner="2" ，然后在最后插入 - 就在 data-owner="2" 上方.

这满足了我的第一个要求:

$('li[data-owner="1"]').after('<li data-id="3"></li>');

但这将在这里插入:

<li data-owner="1"></li>
(insert here)
<li data-id="1"></li>
<li data-id="2"></li>
<li data-owner="2"></li>

有没有办法让它插入一个元素之后，然后向下移动，直到找到另一个元素并插入到该元素之前？或者找到下一个元素li[data-owner]在特定元素 li[data-owner="2"] 之后并在此之前插入？

我无法使用$('li[data-owner="2"]').before('<li data-id="3"></li>');因为我不知道data-owner的具体值我想在之前插入的元素。

Answer 1

您将需要查找下一个具有数据 id 的列表元素，然后将插入内容放在该元素之前。这可以使用 nextAll 来完成。该示例被分解是为了更清晰地显示步骤，而不是简单地链接起来。

var owner = 1;
var currentOwner = $('li[data-owner='+owner+']');
var nextOwner = currentOwner.nextAll('li[data-owner]:first');
nextOwner.before('<li data-id="3">(insert: li data-id="3")</li>');

//1-liner: $('li[data-owner=1']').nextAll('li[data-owner]:first').before('<li data-id="3">(insert)</li>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-owner="1">data-owner="1"</li>
<li data-id="1">data-id="1"</li>
<li data-id="2">data-id="2"</li>
<li data-owner="2">data-owner="2"</li>