如何在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>

我想根據另一個按鈕點擊觸發任何 li。

我嘗試了以下代碼。 但它們都觸發了集合的最后 li。

$("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 <li/>或者只需簡單地點擊任何<li>

僅供參考：只需取消注釋相關行即可查看示例工作。

 // fake event $(document).on('click', 'ul.slick-dots li', function() { $(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>

或查看小提琴