두 번째 및 다섯 번째 자식 타겟팅

Question

동일한 ID가있는 페이지에 두 개의 UL이 있습니다. 2 차 UL에서 5 리를 목표로하고 싶습니다. 이런 식으로 할 수 있습니까?

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

첫째, 당신은 당신이 HTML에서 동일한 ID를 가진 두 개의 요소를 가질 수 없기 때문에, 클래스에 homepage-blockpaging을 변경할 수 있습니다 !

$(".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

당신은 사용하여 2 UL를 찾을 수 있습니다 $("ul")[1]

을 그리고, 찾을 수 5t h li, :eq과 함께 jQuery find() 메서드를 사용할 수 있지만이를 사용하려면 다시 jQuery 객체로 변환해야합니다.

그래서, 마지막으로 당신이 같은 끝낼 : 모든

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