jquery에서 요소의 n 번째 자식을 얻는 방법

Question

내 코드는 아래와 같습니다. 슬라이더 스크립트에서 생성됩니다.

<ul class="slick-dots" style="display: block;"> 
    <li aria-hidden="true"> 
     <div style="width:100%;height:100%;"> 
      <img style="pointer-events:none;" osrc="images/1234.jpg"> 
     </div> 
    </li> 
    <li aria-hidden="true"> 
     <div style="width:100%;height:100%;"> 
      <img style="pointer-events:none;" osrc="images/234.jpg"> 
     </div> 
    </li> 
    <li aria-hidden="true"> 
     <div style="width:100%;height:100%;"> 
      <img style="pointer-events:none;" src="images/456.jpg"> 
     </div> 
    </li> 
    <li aria-hidden="false" class="slick-active"> 
     <div style="width:100%;height:100%;"> 
      <img style="pointer-events:none;" src="images/7809.jpg"> 
     </div> 
    </li> 
</ul> 

다른 버튼 클릭을 기반으로 모든 리를 트리거하고 싶습니다.

같은 코드를 사용해 보았습니다. 그러나 그들 모두가 세트의 마지막 부분을 트리거합니다.

$("ul.slick-dots li").eq(1).trigger("click"); 
$($('ul.slick-dots').children()[2]).trigger("click"); 
$('.slick-dots > :nth-child(2)').trigger("click"); 

다른 해결책이 있습니까? 내 코드가 잘못 되었나요?

Answer 1

$('#fire').click(function(){ 
 
fireClick(0);// for example u want to trigger the first li here 
 
}); 
 
$('li').click(function(){ 
 
    $(this).css('border','1px solid black'); 
 
}) 
 
function fireClick(element){ 
 
      var myTriggerPoint=element; 
 
      $("ul.slick-dots li").each(function(i,ele){ 
 
       if(i==myTriggerPoint){ 
 
        $(ele).trigger("click"); 
 
       } 
 
      }); 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="slick-dots" style="display: block;"> 
 
    <li aria-hidden="true"> 
 
     <div style="width:100%;height:100%;">list1 
 
     </div> 
 
    </li> 
 
    <li aria-hidden="true"> 
 
     <div style="width:100%;height:100%;">list2 
 
     </div> 
 
    </li> 
 
    <li aria-hidden="true"> 
 
     <div style="width:100%;height:100%;">list3 
 
     </div> 
 
    </li> 
 
    <li aria-hidden="false" class="slick-active"> 
 
     <div style="width:100%;height:100%;">list4 
 
     </div> 
 
    </li> 
 
</ul> 
 
<div id='fire'>fire click</div>

Answer 2

나는 당신이 어떤 <li>

에 많은 ListItems 참고하시기 바랍니다 <li/> 또는 단지 간단한 클릭을 선택하는 방법을 여기에 몇 가지 예제를 가지고 : 그냥 예를 작동 확인하기 위해 해당 라인의 주석을 해제 .

// fake event 
 
$(document).on('click', 'ul.slick-dots li', function() { 
 
\t $(this).css('background', 'red'); 
 
}); 
 

 

 
// trigger first child 
 
//$('ul.slick-dots').children('li').get(0).click(); 
 
//$('ul.slick-dots').children('li:first-child').click(); 
 

 
// trigger second child 
 
//$('ul.slick-dots').children('li').get(1).click(); 
 

 
// trigger last child 
 
//$('ul.slick-dots').children('li').get(3).click(); 
 
//$('ul.slick-dots').children('li:last-child').click(); 
 

 
// trigger all 
 
//$('ul.slick-dots').children('li').each(function() { $(this).click(); })

ul { 
 
    width: 50%; 
 
} 
 

 
li { 
 
    height: 30px; 
 
    background: grey; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="slick-dots" style="display: block;"> 
 
    <li aria-hidden="true"> 
 
     <div style="width:100%;height:100%;"> 
 
      asdf 
 
     </div> 
 
    </li> 
 
    <li aria-hidden="true"> 
 
     <div style="width:100%;height:100%;"> 
 
      asdf 
 
     </div> 
 
    </li> 
 
    <li aria-hidden="true"> 
 
     <div style="width:100%;height:100%;"> 
 
      asdf 
 
     </div> 
 
    </li> 
 
    <li aria-hidden="false" class="slick-active"> 
 
     <div style="width:100%;height:100%;"> 
 
      asdf 
 
     </div> 
 
    </li> 
 
</ul>

아니면이 모두 여기에 기록 기본적으로 Fiddle