jquery - 如何获取定义了任何类的 DOM 元素的所有后代？

Question

总的来说，我对 jQuery 和 javascript 相当陌生，我希望只返回定义了类的 DOM 元素。例如:

<div id="myObject">
  <h2>hello world</h2>
  <div class="foo">bar</div>
  <div class="bar">foo</div>
  <div></div><a href="http://google.com"></a>
</div>

我想知道是否存在一个 jQuery 函数或一个巧妙的搜索参数，我可以传递给 $(#myObject).find(...) ，它只会返回 .foo 和 .bar，因为它们是仅有的两个定义了类的 DOM 元素。概括来说，是否也可以搜索任何属性的存在？

看来我可以使用更复杂的函数调用字符串来做到这一点，例如

var toReturn = [];
var descendants = $('#myObject').find('*');
$.map(descendants, function (element, index) {
    if(element.getAttribute('class') != undefined){
      toReturn.push(element);
    }
});

但是如果有更简单的东西，了解它会很有帮助。

Answer 1

使用$('#myObject [class]:not([class=""])')。它将选择定义了类的 #myObject 的所有后代，并将排除已删除类的元素。 (感谢 @TravisJ 的 not 语法!)

片段:

$('.byebye').removeClass('byebye');

$('#myObject [class]:not([class=""])').addClass('selected');

.selected {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myObject">
  <h2>hello world</h2>
  <div class="foo">bar</div>
  <div class="bar">foo</div>
  <div class="byebye">
    class removed
  </div>
  <div>
    no class here
  </div>
  <a href="http://google.com">none here either</a>
</div>