Question

这是我的标记：

<ul>
    <li class='product'></li>
    <li id='foo' class='product'></li>
    <li class='insert'></li>
    <li class='insert'></li>
    <li class='product'></li>
    <li class='product'></li>
    <li class='product'></li>
</ul>

从li＃foo开始，我想在LAST .insert元素之后添加另一个li.insert元素 - 我想我需要从#foo中选择所有邻居元素，然后添加一个新项目。任何想法？

期望的输出：

<ul>
    <li class='product'></li>
    <li id=foo class='product'></li>
    <li class='insert'></li>
    <li class='insert'></li>
    <li class='insert'>new item</li>
    <li class='product'></li>
    <li class='product'></li>
    <li class='product'></li>
</ul>

Answer 1

使用 :last 伪类选择器获取最后一个元素，并在jQuery中使用 after() 方法插入li

// get the last `li` with the class
$('ul li.insert:last')
  // append the html string after the element
  .after('<li class="select">New Item</li>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='product'></li>
  <li id=foo class='product'></li>
  <li class='insert'></li>
  <li class='insert'></li>
  <li class='product'></li>
  <li class='product'></li>
  <li class='product'></li>
</ul>

如果您使用jQuery生成元素，则可以使用 insertAfter() 方法。

// generate li with the content
$('<li/>', {
  class: 'select',
  text: 'New Item'
    // insert after the last li with specific class  
}).insertAfter('ul li.insert:last')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='product'></li>
  <li id=foo class='product'></li>
  <li class='insert'></li>
  <li class='insert'></li>
  <li class='product'></li>
  <li class='product'></li>
  <li class='product'></li>
</ul>

更新：如果您只想考虑#foo元素后的元素，请使用 nextAll() 方法。

// get the `li` with the id
$('#foo')
  // get the last `li` after it with a certain class 
  .nextAll('.insert:last')
  // append the html string after the element
  .after('<li class="select">New Item</li>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='product'></li>
  <li id=foo class='product'></li>
  <li class='insert'></li>
  <li class='insert'></li>
  <li class='product'></li>
  <li class='product'></li>
  <li class='product'></li>
</ul>

Answer 2

如果您想依赖#foo，那么请使用兄弟姐妹在<li>的同一级别捕获#foo并使用:last伪类在最后插入元素<li>

＆＃13;

$('#foo').siblings('.insert:last').after('<li class="insert">New Item</li>')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='product'></li>
  <li id=foo class='product'></li>
  <li class='insert'></li>
  <li class='insert'></li>
  <li class='product'></li>
  <li class='product'></li>
  <li class='product'></li>
</ul>

＆＃13;

Answer 3

试试这个

$('li.insert:last-child').after('<li class="insert">new item</li>');

jquery selector：选择element旁边的所有元素

3 个答案: