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完成。这个例子被打破，以显示更简单的步骤，而不是简单的链接。

＆＃13;

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>')

＆＃13;

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

＆＃13;

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/

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

2 个答案: