Question

简单<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div class="col"> 1 of 2 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 1 of 3 </div> <div class="col"> 1 of 3 </div> </div> </div>和hasclass无效

this.addclass

Link to codepen.

Answer 1

＆＃13;

$('ul.sidebar-menu-container li.current-menu-item').addClass('expanded')

＆＃13;

.expanded {
  background:red !important;
  border: 1px solid green;
}
li {
  background: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu-container">
<li class="current-menu-item">asdasdasdasd</li>
<li>asdasdasdasd</li>
</ul>

＆＃13;

请注意LI的父级是UL
无需迭代

Answer 2

您在$(this)内使用了document.ready，因此$(this)引用的文档不是($('.sidebar-menu-container li')。在任何函数外使用this都是指全局对象

让您的代码正常工作

$(document).ready(function($) {

$('.sidebar-menu-container li').each(function(){
 if ($(this).hasClass('current-menu-item')) {

    $(this).addClass('expanded');
  }
})
 
});

.expanded {
  background:red !important;
  border: 1px solid green;
}
li {
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu-container">
<li class="current-menu-item">asdasdasdasd</li>
<li>asdasdasdasd</li>
</div>

或只是

jQuery(document).ready(function($) {

$('.sidebar-menu-container li.current-menu-item').addClass('expanded')
 
});

.expanded {
  background:red !important;
  border: 1px solid green;
}
li {
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu-container">
<li class="current-menu-item">asdasdasdasd</li>
<li>asdasdasdasd</li>
</div>

Answer 3

选择器$('.sidebar-menu-container li')正在返回多个元素，因此如果其中一个元素具有类current-menu-item，则它将为true。您必须使用循环，或者更好：

$('.sidebar-menu-container li.current-menu-item').addClass('expanded');

以上代码将选择li所有.current-menu-item类，并为其添加expanded类。没有循环或条件，jQuery为你做。

Answer 4

你的元素返回多个元素，这是它不工作的尝试这个

jQuery(document).ready(function($) {
  $("li").click(function(){
  if ($(this).hasClass('current-menu-item')) {
    $(this).addClass('expanded');
  }
    });
});

Answer 5

我认为您可以使用：

$('.sidebar-menu-container li.current-menu-item').addClass('expanded');

你不需要if。

Answer 6

＆＃13;

$(document).ready(function() {
$('.sidebar-menu-container li.current-menu-item').addClass('expanded');
});

＆＃13;

.expanded {
  background:red !important;
  border: 1px solid green;
}
li {
  background: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu-container">
<li class="current-menu-item">asdasdasdasd</li>
<li>asdasdasdasd</li>
</div>

＆＃13;

为什么这个jQuery不起作用

6 个答案: