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

Posted 2023-05-07

【中文标题】jQuery在具有属性的li元素之后插入[重复]

【英文标题】：jQuery insert after li element with attribute [duplicate]

【发布时间】：2018-03-14 11:50:41

【问题描述】：

我有清单：

<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 时，什么都不会发生。有什么建议吗？

【问题讨论】：

你的问题有点不清楚。请详细说明

如果以下任何答案对您有所帮助，请不要忘记通过单击答案左侧的复选标记进行批准。祝你好运！

【参考方案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>

【讨论】：

这个答案有效..为什么它被否决

@ProEvilz as You 我不明白为什么！

如果 data-featured=1 有效，但如果所有 li 元素的 data-featured=0，则什么也不会发生

你应该EXTREMELY直接给出上面的例子和一个简单的if语句。我将删除我的答案，并且因为您有毒，所以不打扰帮助。在这一点上它是懒惰的。

@MehdiBouzidi 你认为 html 结构是否正确。您通过附加将 li 嵌套在 li 中！！！当问题是关于在某事后插入时，你为什么使用append()？

【参考方案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>

【讨论】：

完美！非常感谢

很高兴它对您有所帮助。干杯。

【参考方案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>

【参考方案4】：

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

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

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

示例如下：Link

【讨论】：

快到了，但是当我创建else $('.customList').append(myCustomItem); 然后else不工作，为什么？

myCustomItem 不能直接工作，你需要像$('ul').append("<li data-featured='222'>myCustomItem</li>");这样写

如果 myCustomItem 是数组，则需要循环。迭代数组，然后将其添加回 标记

不，如果我写if($('li[data-featured="1"]') != null)alert('first');elsealert('second'); And always I got alert first. Why?

if($('li[data-featured="1"]').val() != null) .... 你需要像这里显示的那样使用.val()。跨度>