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>

如何在<li>之后插入自定义featured="1"？如果全部为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]：

＆＃13;

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

＆＃13;

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

＆＃13;

或者如果您想在第一个li标记之后插入它，请使用：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以先使用jQuery attribute selector [attribute = value]：来检查li是否存在data-featured="1"。如果存在，则使用jQuery方法.insertAfter()在其后插入新li，如果不存在，则使用.insertBefore().

在第一个位置插入新li

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

首先，当问题是关于append()之后的插入时，我会说不要使用 li。请查看以下代码段，首先检查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($('li[data-featured="1"]') != null)

以下是示例：Link

jQuery在带有属性的li元素后插入

4 个答案: