<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');
}
});
});
к сожалению, они добавляют к активному классу все не только для открытия класса. Прежде чем открывать этот пост, я потратил некоторое время на то, чтобы решить эту проблему сейчас. Мне нужна ваша помощь.
Вы старый код;
$(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');
});
Просто используйте
$('#demo3 > li.open').each(function(i){
$(this).addClass('active');
});
Таким образом вы будете выбирать только li
с открытым классом
Первый ответ, безусловно, работает. Я бы попытался свести его к одному, который будет вызван в $(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
});
});
Надеюсь это поможет! Дайте знать, если у вас появятся вопросы.
Использование:
$(function(){
$('#demo3 li.open').addClass('active');
});
li
внутри #demo
с классом open
: $('#demo3 li.open')
делает это. И он хочет добавить класс active
к этим элементам .addClass('active')
делает это.
open
, зачем добавлять другойactive
класс? Разве вы не можете просто указать CSS для.open
?