如何确定哪个元素具有特定的类名?

时间:2016-03-08 11:53:16

标签: javascript jquery html css

我有这个HTML结构:



$("li").on("click", function(){ 
  // I need to remove active-class form current element
  $(this).addClass("active");
});

li:hover{
  background-color: #eee;
  cursor: pointer;
}

.active{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Numbers:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
&#13;
&#13;
&#13;

在上面的代码中,当您点击<li>标记的内容时,active类将添加到该元素中。现在我想检测active类是否在哪个元素上?首先从.removeClass()中删除该类,然后将active类添加到单击的元素中。换句话说,我需要使它(active class)唯一。

我该怎么做?

4 个答案:

答案 0 :(得分:5)

请使用:

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
   {
    [super viewWillTransitionToSize:size     withTransitionCoordinator:coordinator];
  [self.collectionViewLayout invalidateLayout];
  [self.collectionView reloadData];

}  

首先从上一个活动元素中删除活动类:$("li").on("click", function(){ $('li.active').removeClass('active'); // I need to remove active-class form current element $(this).addClass("active"); }); ,然后只更新单击的元素。

答案 1 :(得分:3)

您可以使用.siblings()

$("li").on("click", function(){ 
  $(this).siblings().removeClass('active');
  $(this).addClass("active");
});
li:hover{
  background-color: #eee;
  cursor: pointer;
}

.active{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

答案 2 :(得分:2)

使用not()选择除被点击的所有活动类别之外的所有活动类别并删除其活动链接

$("li").on("click", function(){ 
  $(this).addClass("active");
  $("li.active").not(this).removeClass('active'); 
});

答案 3 :(得分:2)

试试这个

$("li").on("click", function(){ 
   $("li.active").removeClass("active");
   $(this).addClass("active");
});