Jquery запустить каждый вложенный li и добавить класс

Question

Jquery запустить каждый вложенный li и добавить класс

0

<ul id="demo3" class="menu_list">
<li><a href="#">Home</a></li>
<li class="open"><a href="#"><span></span>1</a>
<ul>
<li><a href="#">Product list</a></li>
<li><a href="#">Add product</a></li>
</ul>
</li>
</ul>

Мне нужно в $(window).load loop все мое меню и найти, если существует класс open, если да, то добавить к нему активный.

Я сделал такой код:

$(window).load(function() {

    $('#demo3 > li').each(function(i){
       if($('#demo3 > li').hasClass('open'))
        {
            $(this).addClass('active');
        }
    }); 

});

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

Viktors 19 март 2014, в 23:48

Источник

0

Если в li уже есть класс open , зачем добавлять другой active класс? Разве вы не можете просто указать CSS для .open ?
mccannf 19 март 2014, в 22:53

Теги:

jquery

each

4 ответа

4

Просто используйте

 $('#demo3 > li.open').each(function(i){
          $(this).addClass('active');
 });

Таким образом вы будете выбирать только li с открытым классом

Eduardo Quintana 19 март 2014, в 21:26

0

Здесь нет необходимости делать .each (). Смотрите мой ответ для большего объяснения.
Nick M 19 март 2014, в 22:49
0

@NickM Ты прав, спасибо.
Eduardo Quintana 19 март 2014, в 22:52
0

Не волнуйтесь. Демонстрация вашего пути, по крайней мере, демонстрирует использование each () и почему OP в любом случае неправильный, так что это полезно.
Nick M 19 март 2014, в 22:53

Показать ещё 1 комментарий

1

Первый ответ, безусловно, работает. Я бы попытался свести его к одному, который будет вызван в $(window).load, с:

$(window).load(function () {
    $('#demo3 > li.open').addClass("active");
}

Если честно, это может быть не самый лучший вариант, в зависимости от того, хотите ли вы сделать больше, чем просто добавить класс .active к указанному элементу. В этом случае, ранее используемый .each обозначение может быть необходимо:

$(window).load(function () {
    $('#demo3 > li.open').each( function(){
        $(this).addClass("active");

        // And do additional stuff
    });
});

Надеюсь это поможет! Дайте знать, если у вас появятся вопросы.

Serlite 19 март 2014, в 20:41

0

Использование:

$(function(){
    $('#demo3 li.open').addClass('active');
});

Aguardientico 19 март 2014, в 21:16

0

Можете ли вы рассказать, что делает этот код и как он решает проблему ОП?
sgress454 19 март 2014, в 23:09
0

Он просит получить все li внутри #demo с классом open : $('#demo3 li.open') делает это. И он хочет добавить класс active к этим элементам .addClass('active') делает это.
Aguardientico 20 март 2014, в 00:59

Ещё вопросы

Если в li уже есть класс open , зачем добавлять другой active класс? Разве вы не можете просто указать CSS для .open ?
Здесь нет необходимости делать .each (). Смотрите мой ответ для большего объяснения.
Не волнуйтесь. Демонстрация вашего пути, по крайней мере, демонстрирует использование each () и почему OP в любом случае неправильный, так что это полезно.
Можете ли вы рассказать, что делает этот код и как он решает проблему ОП?
Он просит получить все li внутри #demo с классом open : $('#demo3 li.open') делает это. И он хочет добавить класс active к этим элементам .addClass('active') делает это.

Nick M · Accepted Answer · 2014-03-19T19-58-00.000Z

Вы старый код;

$(window).load(function() {
// loops thoght each li
    $('#demo3 > li').each(function(i){
        // for each li we loop throguh, it creates a new jQuery object of all ('#demo3 > li') - wrong!
        if($('#demo3 > li').hasClass('open')) {
            // then adds class to the original loop this (which is the current li element) - corrent.
            $(this).addClass('active');
        }
    }); 
});

Измените это;

$(window).load(function() {
    $('#demo3 > li').each(function(index, el){
        if($(this).hasClass('open')){
            $(this).addClass('active');
        }
    }); 
});

Вы использовали $ (this) при попытке добавить класс, но не проверяли, имел ли он класс сначала. Итак, на вашей линии, где вы проверяете, есть ли у него открытый класс, вы на самом деле создаете новый объект jQuery, который будет массивом #demo3 li, а не текущим li вы итерируете.

Как вы можете видеть, я добавил в 2 параметра к каждой функции. index - текущий индекс итерации, el - текущий элемент html (не объект jQuery). Вы можете заменить $(this) на $(el) в этом примере.

Но в целом, что вы можете сделать, это выбрать только те, у которых есть "открытый" класс, а затем просто добавить "активное" для всех из них;

$(window).load(function() {
    $('#demo3 > li.open').addClass('active');
});