jQuery在具有属性的li元素之后插入[重复]

Question

我有清单：

<ul class="customList">
    <li data-featured="1">First item</li>
    <li data-featured="0">Another item</li>
    <li data-featured="0">Last item..</li>
</ul>

如何在featured="1" 之后插入我的自定义<li>？如果全部为 0，则作为第一个插入 li.. 提前致谢。

var self = this;
self.scope.find('.customList').prepend(myCustomItem); //this code inserts in begin, not after featured items..
$(myCustomItem).insertAfter('[data-featured="1"]'); //I've tried to build something.. but this fails

对不起我的英语不好

编辑

myCustomItem.insertAfter('[data-featured="1"]'); 看起来正在工作，但是当有任何 data-featured=1 时，什么都不会发生。有什么建议吗？

Answer 1

使用 jQuery attribute selector [attribute=value]:

$(" <li data-featured='222'>NEW ITEM</li>").insertAfter('.customList li[data-featured="1"]');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customList">
    <li data-featured="1">First item</li>
    <li data-featured="0">Another item</li>
    <li data-featured="0">Last item..</li>
</ul>

或者如果你想在第一个li标签之后插入它，使用这个：

$(" <li data-featured='222'>NEW ITEM</li>").insertAfter('.customList li:first');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customList">
    <li data-featured="1">First item</li>
    <li data-featured="0">Another item</li>
    <li data-featured="0">Last item..</li>
</ul>

Answer 2

您可以先使用 jQuery attribute selector [attribute=value]: 来检查 li 和 data-featured="1" 是否存在。如果存在则使用jQuery方法.insertAfter()在它之后插入新的li，如果不存在则使用.insertBefore().在第一个位置插入新的li

if($('.customList li[data-featured="1"]').length>0)
{
      $("<li data-featured='99'>NEW ITEM</li>").insertAfter('.customList li[data-featured="1"]');
}
else
{
      $("<li data-featured='99'>NEW ITEM</li>").insertBefore('.customList li:first');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customList">
    <li data-featured="0">First item</li>
    <li data-featured="0">Another item</li>
    <li data-featured="0">Last item..</li>
</ul>

Answer 3

首先我会说不要使用 append()，当问题是关于在li 之后插入时。检查下面的sn-p，首先检查data-featured=1的条件是否可用，然后在此基础上检查prepend()或insertAfter()。

var flag = false;
$('.customList li').each(function() {
  if ($(this).data('featured') == '1') {
    flag = true;
  }
});
if (flag) {  
  $("<li data-featured='222'>NEW ITEM</li>").insertAfter('.customList li[data-featured="1"]');
} else {
  $('.customList').prepend(" <li data-featured='222'>NEW ITEM</li>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customList">
  <li data-featured="1">First item</li>
  <li data-featured="0">Another item</li>
  <li data-featured="0">Last item..</li>
</ul>

Answer 4

newStatus.insertAfter('[data-featured="1"]');

工作正常，但只需要检查添加的项目是否是第一个项目的情况。这可以通过 if 条件轻松完成。 像这样：

if($('li[data-featured="1"]') != null)

示例如下：Link