針對第二個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>');