JQuery，检索子孙答案

【问题标题】：JQuery, retrieve children and grandchildrenJQuery，检索子孙
【发布时间】：2011-09-28 18:18:18
【问题描述】：

假设我有一个具有（或指向）这样一个结构的 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', ...]

谢谢

附：请注意，它不能是 $('div > div') 这样的选择器，因为我已经有了 JQuery 对象，我只需要从这个对象中取东西。

【问题讨论】：

我很想知道您所说的 是什么意思...获取元素的普通数组（JQuery 对象）..."。你想要哪个？一个数组，还是一个 jQuery 对象？
jQuery 对象实际上是数组，对吧？我的意思是我想获取父元素和所有嵌套元素
不，jQuery 对象有时被称为类数组对象，但它并不是真正的数组。
我是 jQuery 新手，所以我不能具体，我经常将 jQuery 对象视为一个数组。

标签： javascript jquery arrays dom

【解决方案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>

【讨论】：

recursiveIterate函数对我很有帮助，因为我不擅长递归，谢谢
@megas：第一个例子会给你一个 flat 数组； second 可用于创建数组数组（未演示）。

【解决方案2】：

您可以使用toArray()^[docs] 方法将您的jQuery 对象变成一个数组。

var arr = my_obj.toArray();

...或者 get()^[docs] 方法，如果你不传递任何参数的话。

var arr = my_obj.get();

如果我理解错了，你指向的是结构的根，并且需要获取它的后代，使用find()^[docs]方法方法。

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

jQuery has many traversal methods 让您从给定点绕过 DOM 结构。

如果您只想要孩子和孙子，而不是更深层次的，请这样做：

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

这会给你div 元素只有 2 代深。

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

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

【讨论】：

我相信你的意思是$('parent,parent *').toArray()，对吗？
@patrick dw，这会得到子孙吗？
@kmb385：问题标题和文本似乎有点不同步，但我更新了我的答案，以防 OP 实际上只指特定节点，而不是整个集合。

【解决方案3】：

嘿，伙计，我在这里很新，我也有类似的大脑放屁。为了得到孙子，我建议使用 .children() 方法：

$('#parent') //selects the parents
$('#parent').children() //selects the children
$('#parent').children().children() //selects the grandchildren

【讨论】：