如何在特定元素之后但在另一個元素之前插入

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="2"]之后找到下一個元素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> 

Answer 2

遵循這些原則？

<ul>
<li data-owner="1">a</li>
<li data-id="1">b</li>
<li data-id="2">c</li>
<li data-owner="2">d</li>
</ul>

javascript：

var owner_flag = 0;
jQuery("li[data-owner]").each(function(){
    if(owner_flag == 1)
    {
        owner_flag == 0;
        jQuery(this).before('<li data-id="3">next</li>');
    }
    if(jQuery(this).attr("data-owner") == "1")
    {
        owner_flag = 1;
    }
});

https://jsfiddle.net/u7m5mkL6/