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

我尝试了以下代码。但是所有这些都触发​​了该集合的最后一个。

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

即可

fyi：只需取消对相关行的评论，即可查看示例工作情况。

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

或查看Fiddle