Блог

Главная - Вопросы по программированию - как получить n-й дочерний элемент элемента в jquery

как получить n-й дочерний элемент элемента в jquery

#javascript #jquery #html-lists

#javascript #jquery #html-списки

Вопрос:

Мой код приведен ниже. Он создается из скрипта слайдера.

 <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");

Есть ли какое-либо другое решение проблемы или это из-за какой-либо ошибки в моем коде.

Комментарии:

1. в основном все это написано здесь: api.jquery.com/nth-child-selector

2. я думаю, что 1-й и 3-й должны работать, вы также можете написать 3-й как ('.slick-dots li:nth-child(2)')

3. Ваш код должен работать так, как ожидалось, просто мы не знаем, чего вы ожидаете ?!

4. я добавил этот код в fiddle jsfiddle.net/06bo6b7y . первый и последний из триггеров работают хорошо. Вы должны проверить что-то еще. Может быть, если вы используете плагин

5. Как вы проверяете, что это последний элемент, который был запущен? Очевидно, что ваше наблюдение неверно. НО опять же, мы понятия не имеем, что он должен делать, и как вы его отлаживаете. Если бы вы предоставили минималистичный образец, повторяющий вашу проблему, это было бы давно исправлено

Ответ №1:

Здесь у меня есть несколько примеров того, как вы можете выбрать свои <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>

Или проверьте Fiddle

Ответ №2:

 $('#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>

Комментарии:

1. В вашем примере, поскольку myTriggerPoint=1 он будет нацелен на второй li , а не на первый, и в любом случае, это бесполезно использовать каждый цикл. Опубликованный OP код наверняка лучше

2. это также запускает последний элемент li, а не назначенный.

3. Перебирать все совпадающие элементы только для проверки индекса — ужасный способ сделать это, когда есть много прямых способов получить доступ к элементу по индексу.