JQuery,检索孩子和孙子

Question

假设我有一个JQuery对象,它具有(或指向)这样的结构:

<div id="parent">
  <div id="child1">
    <div id="grandchild1">
      // ... grandchild can also have children
    </div>
    // ... and so on of grandchildren
  </div>
  <div id="child2">

  </div>
  // .... and so on
</div>

是否有可能从我的对象获取简单的元素数组(JQuery对象),如下所示:

['parent', 'child1', 'child2', ..., 'grandchild1', ...]

谢谢

PS请注意它不能是这样的选择器$('div> div'),因为我已经有了JQuery对象,只有从这个对象我需要拿东西.

Answer 1

您可以使用*选择器检索子孙.这些项目将按树顺序返回.然后,您可以使用jQuery.toArray()以下方法获取简单的元素数组:

$(function() {
  var a = $("#wrapper").find("*").toArray();
  console.log(a);
});

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

<div id="wrapper">
  <div id="parent">
    <div id="child1">
      <div id="grandchild1">
        <div class="level-4"></div>
        <div class="level-4"></div>
        <div class="level-4"></div>
      </div>
    </div>
    <div id="child2">
      <div class="level-3"></div>
      <div class="level-3"></div>
      <div class="level-3"></div>
      <div class="level-3">
        <div class="level-4"></div>
        <div class="level-4"></div>
        <div class="level-4"></div>
      </div>
    </div>
  </div>
</div>

如果您对使用递归迭代层次结构更感兴趣,则以下内容非常有用但很有用:

function recursiveIterate($node, array) {
  $node.children().each(function() {
    array.push(this);
    recursiveIterate($(this), array);
  });
}
$(function() {
  var a = [];
  recursiveIterate($("#wrapper"), a);
  console.log(a);
});

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

<div id="wrapper">
  <div id="parent">
    <div id="child1">
      <div id="grandchild1">
        <div class="level-4"></div>
        <div class="level-4"></div>
        <div class="level-4"></div>
      </div>
    </div>
    <div id="child2">
      <div class="level-3"></div>
      <div class="level-3"></div>
      <div class="level-3"></div>
      <div class="level-3">
        <div class="level-4"></div>
        <div class="level-4"></div>
        <div class="level-4"></div>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以使用toArray()^[docs]方法将jQuery对象转换为Array.

var arr = my_obj.toArray();

...或者get()^[docs]方法,如果你没有传递任何参数.

var arr = my_obj.get();

如果我误解了,并且您指向结构的根,并且需要获取其后代,请使用find()^[docs]方法.

var descendants = my_obj.find('div');

jQuery 有许多遍历方法,可以让你从给定的点开始绕过DOM结构.

如果你只想要孩子和孙子,而不是更深层次,那就这样做:

var two_generations = my_obj.find('> div > div');

这将为您提供div仅2代深的元素.

如果您不想将其限制为div元素,请执行以下操作:

var two_generations = my_obj.find('> * > *');