jQuery選擇器：選擇元素旁邊的所有元素

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使用兄弟姐妹在同一級別的#foo上捕獲<li> ，並使用:last偽類在最后一個<li>之后插入元素

 $('#foo').siblings('.insert:last').after('<li class="insert">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 3

嘗試這個

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