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

私はここにあなたがあなたのlistItems FYI任意の<li>

上<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