Question

我想将一个类（活动）添加到具有类（is-active）且不影响其他元素的元素的子元素。使用jQuery！

<ul>
   <li class="nav-item is-active"><a href="#" class="nav-link">Link 1</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 2</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 3</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 4</a><li>
</ul>

我使用此代码但它会影响所有其他元素。

if ($(".nav-item").hasClass("is-active")) {
  $('a', this).addClass('active');
}

我希望是这样的：

<ul>
       <li class="nav-item is-active"><a href="#" class="nav-link active">Link 1</a><li>
       <li class="nav-item"><a href="#" class="nav-link">Link 2</a><li>
       <li class="nav-item"><a href="#" class="nav-link">Link 3</a><li>
       <li class="nav-item"><a href="#" class="nav-link">Link 4</a><li>
</ul>

Answer 1

if ($(".nav-item").hasClass("is-active")) {
  $(this).find('a').addClass('active');
}

您可以使用此代码

Answer 2

您可以将选择器链接到目标父母，然后使用.find()来获取孩子。

$(".nav-item.is-active").find('a').addClass('active')

Answer 3

您可以将它组合到一个选择器中（选择.nav-item中is-active的{{1}}标签），然后将类添加到其中。

$('.nav-item.is-active a').addClass('active');

＆＃13;

$(".nav-item.is-active a").addClass('active');

console.log($('ul').html())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="nav-item is-active"><a href="#" class="nav-link">Link 1</a>
    <li>
      <li class="nav-item"><a href="#" class="nav-link">Link 2</a>
        <li>
          <li class="nav-item"><a href="#" class="nav-link">Link 3</a>
            <li>
              <li class="nav-item"><a href="#" class="nav-link">Link 4</a>
                <li>
</ul>

＆＃13;

仅供参考：在您的代码this中没有引用该元素，它可能是窗口对象或其他内容，因此它不会起作用。要使其工作，请使用each()方法。

$(".nav-item").each(function(){
  if($(this).hasClass("is-active")) {
     $('a', this).addClass('active');
  }
})

＆＃13;

$(".nav-item").each(function() {
  if ($(this).hasClass("is-active")) {
    $('a', this).addClass('active');
  }
})

console.log($('ul').html())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="nav-item is-active"><a href="#" class="nav-link">Link 1</a>
    <li>
      <li class="nav-item"><a href="#" class="nav-link">Link 2</a>
        <li>
          <li class="nav-item"><a href="#" class="nav-link">Link 3</a>
            <li>
              <li class="nav-item"><a href="#" class="nav-link">Link 4</a>
                <li>
</ul>

＆＃13;

Answer 4

如果当前元素具有某个类，则可以循环遍历元素并添加类。这是一个有效的例子。

var navlist = $(".nav-item");
$.each(navlist, function() {
  if ($(this).hasClass("is-active")) {
    $(this).find('a').addClass('active');
  }
});

console.log($('ul').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li class="nav-item is-active"><a href="#" class="nav-link">Link 1</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 2</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 3</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 4</a><li>
</ul>

Jquery如果element有类，则向该元素子类添加类

4 个答案: