Question

我们在下面的菜单中具有以下结构（ul > li > a）。我们希望能够找到所有以<a>和color--开头的css类的bkg--。

我知道我可以通过做$(element).children().children()来获得所有的孙子孙女。有没有更简单的方法来获取所有孙子孙，检查他们是否有该课，然后使用jQuery将其删除？

我们尝试过的方法：

    $(function() {
      var grandChildren = $('#someid > li > a');
      grandChildren.removeClass('[class*="bkg--"]');
      grandChildren.removeClass('[class*="color--"]');
    });

    .bkg--black {
      background-color: black;
    }
    .bkg--white {
      background-color: white;
    }
    .bkg--red {
      background-color: red;
    }
    .bkg--blue {
      background-color: blue;
    }

    .color--white {
      color: white;
    }
    .color--black {
      color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul id='someid'>
  <li>
    <a class="bkg--black color--white" href="#">Some path 1</a>
  </li>
  <li>
    <a class="bkg--white color--black" href="#">Some path 2</a>
  </li>
  <li>
    <a class="bkg--red color--white" href="#">Some path 3</a>
  </li>
  <li>
    <a class="bkg--blue color--white" href="#">Some path 4</a>
  </li>
</ul>

Answer 1

是的。只需使用.find() method和some code from your previous question

jQuery(function($) { // Better DOM ready

  $("#someid").find("a").prop("class", function(i, cls) {
    return cls.replace(/(^|\s)(bkg|color)--\S+/g, '');
  });

});

.bkg--black {
  background-color: black;
}

.bkg--white {
  background-color: white;
}

.bkg--red {
  background-color: red;
}

.bkg--blue {
  background-color: blue;
}

.color--white {
  color: white;
}

.color--black {
  color: black;
}

<ul id='someid'>
  <li>
    <a class="bkg--black color--white" href="#">Some path 1</a>
  </li>
  <li>
    <a class="bkg--white color--black" href="#">Some path 2</a>
  </li>
  <li>
    <a class="bkg--red color--white" href="#">Some path 3</a>
  </li>
  <li>
    <a class="bkg--blue color--white" href="#">Some path 4</a>
  </li>
</ul>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

专业提示：

在您拥有'[class^="bkg--"]'的情况下，

class="foo bkg--red"是不够的，因为^=表示以开头；但以 foo开头。
改为使用：

'[class^="bkg--"], [class*=" bkg--"]'

有获取孙子元素的替代方法吗？

1 个答案: