如何添加类来锚定$（this）.closest（＆＃39; ul＆＃39;）。children（＆＃39; li＆＃39;）？

时间：2017-04-14 09:53:04

标签： javascript jquery

我用jquery学习遍历，我不明白它是如何将这个类添加到无序列表中的所有项目的，我知道它很简单。任何帮助将不胜感激。这是我的代码：

＆＃13;
＆＃13; 
$(function() {
    $('li').click(function(e) {
        e.preventDefault();
        var $this = $(this);

        if($(this).closest('ul').children('li').hasClass('active')) {
              $(this).closest('ul').children('li').removeClass('active');
        } else {
            $(this).closest('ul').children('li').addClass('active');
        }
    });
});
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">Subjects
          <li><a href="#">200</a></li>
          <li><a href="#">215</a></li>
          <li><a href="#">221</a></li>
          <li><a href="#">201</a></li>
          <li><a href="#">220</a></li>
          <li><a href="#">250</a></li>
          <li><a href="#">220</a></li>
          <li><a href="#">201</a></li>
          <li><a href="#">100</a></li>
          <li><a href="#">101</a></li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：0)

  

我不明白它是如何将类添加到无序列表中的所有项目

您只需先删除该类，然后添加到当前元素。

$(function() {
    $('li').click(function(e) {
        e.preventDefault();
       $(this).siblings().removeClass('active');
       $(this).addClass('active');         
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">Subjects
          <li><a href="#">200</a></li>
          <li><a href="#">215</a></li>
          <li><a href="#">221</a></li>
          <li><a href="#">201</a></li>
          <li><a href="#">220</a></li>
          <li><a href="#">250</a></li>
          <li><a href="#">220</a></li>
          <li><a href="#">201</a></li>
          <li><a href="#">100</a></li>
          <li><a href="#">101</a></li>
      </ul>
    </div>
  </div>
</div>

答案 1 :(得分：0)

$(this).closest('ul').children('li')会影响每个li元素。 假设您只想标记单击的li元素，这是解决方案：

$(function() {
  $('li').click(function(e) {
    e.preventDefault();
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(this).addClass('active');
    }
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">Subjects
        <li><a href="#">200</a></li>
        <li><a href="#">215</a></li>
        <li><a href="#">221</a></li>
        <li><a href="#">201</a></li>
        <li><a href="#">220</a></li>
        <li><a href="#">250</a></li>
        <li><a href="#">220</a></li>
        <li><a href="#">201</a></li>
        <li><a href="#">100</a></li>
        <li><a href="#">101</a></li>
      </ul>
    </div>
  </div>
</div>

答案 2 :(得分：0)

如果你正在寻找的话，它肯定可以简化吗？如果没有留下评论，我将编辑：）

$(function() {
  $('li').click(function(e) {
    e.preventDefault();
    $(".nav-pills li").removeClass('active');
    $(this).addClass("active");
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">Subjects
        <li><a href="#">200</a></li>
        <li><a href="#">215</a></li>
        <li><a href="#">221</a></li>
        <li><a href="#">201</a></li>
        <li><a href="#">220</a></li>
        <li><a href="#">250</a></li>
        <li><a href="#">220</a></li>
        <li><a href="#">201</a></li>
        <li><a href="#">100</a></li>
        <li><a href="#">101</a></li>
      </ul>
    </div>
  </div>
</div>

答案 3 :(得分：0)

我不确定，如果这是您想要的，但有一个简单的代码只需在元素中管理active类toggle。

＆＃13;
＆＃13; 
$(function() {
  //    $('li').click(function(e) {
  //        e.preventDefault();
  //        var $this = $(this);
  //
  //        //if($(this).closest('ul').children('li').hasClass('active')) {
  //              //$(this).closest('ul').children('li').removeClass('active');
  //        } else {
  //            //$(this).closest('ul').children('li').addClass('active');
  //        }
  //    });

  $('.nav-stacked li').on('click', function() {
    $('.nav-stacked li').removeClass('active');
    $(this).addClass('active');
  })

});
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">Subjects
        <li><a href="#">200</a></li>
        <li><a href="#">215</a></li>
        <li><a href="#">221</a></li>
        <li><a href="#">201</a></li>
        <li><a href="#">220</a></li>
        <li><a href="#">250</a></li>
        <li><a href="#">220</a></li>
        <li><a href="#">201</a></li>
        <li><a href="#">100</a></li>
        <li><a href="#">101</a></li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

如果你想把＆＃34;活跃＆＃34;仅在当前单击的元素上的类。然后更新您的jQuery代码部分，如下所示。

<script>
   $(function() {
      $('li').click(function(e) {
      e.preventDefault();
        if($(this).closest('ul').children('li').hasClass('active')) {
           $(this).closest('ul').children('li').removeClass('active');
        }
        $(this).addClass('active');
     });
  });
 </script>
相关问题
最新问题