针对第二个UL和第五个孩子

Question

我有两个UL在一个页面上具有相同的ID。我想定位第二个UL中的第五个锂。是否有可能做这样的事情？

HTML：

<ul id="homepage-blockpaging"> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
</ul> 

<ul id="homepage-blockpaging"> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
</ul> 

提出的jQuery：

$('#homepage-blockpaging:eq(1) li:eq(4)').after('<li>New Item</li>'); 

首选结果：

<ul id="homepage-blockpaging"> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
<li>New Item</li> 
<li>Item </li> 
<li>Item </li> 
<li>Item </li> 
</ul> 

Answer 1

首先，你要改变homepage-blockpaging一类，因为你不能有HTML中的相同的ID两个元素！

然后，你就可以完成你想要的东西是这样的：

$(".homepage-blockpaging:eq(1)") // get 2nd ul 
    .find("li:eq(4)") // get the 5th li inside it 
    .after(// create a new li element 
     $("<li>") 
      .text("New Item") 
    ); 

Here的演示。

Answer 2

可以使用找到第二UL：$("ul")[1]

然后，找到5t h li，您可以使用jQuery find()方法以及:eq但要使用它们，您必须将其转换回jQuery对象。

所以，最后你最终的东西，如：

$($("ul")[1]).find("li:eq(4)").after('<li>New Item</li>');