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', ...]

由于

P.S。请注意，它不能是这样的选择器$（'div＆gt; 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对象转换为数组。

var arr = my_obj.toArray();

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

var arr = my_obj.get();

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

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

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

如果您只想要孩子和孙子女，而不是更深层次，请执行此操作：

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

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

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

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

Answer 3

嘿，我在这里很新，而且我有类似的脑屁。为了得到孙子女，我建议使用.children（）方法：

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

JQuery，检索孩子和孙子

3 个答案: