JQuery，获取子元素和孙子元素

Question

JQuery，获取子元素和孙子元素

14

假设我有一个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对象，只需要从这个对象中获取内容。

- megas

我很好奇你所说的“...获取元素的普通数组（JQuery对象）...”是什么意思。你想要哪一个？是一个数组还是一个jQuery对象？ - user113716

jQuery对象实际上是一个数组，对吧？我的意思是我想获取父元素和所有嵌套的子元素。 - megas

不，jQuery对象有时被称为类似数组的对象，但它并不是真正的数组。 - user113716

我对jQuery还很陌生，所以无法具体说明，我经常将jQuery对象视为数组。 - megas

3个回答

7

你可以使用toArray()^[文档]方法将你的jQuery对象转换为一个数组。

var arr = my_obj.toArray();

如果您没有传递任何参数，可以使用get()^[docs]方法。

var arr = my_obj.get();

如果我误解了并且你指的是结构的根，需要获取其后代，请使用find()^[文档]方法。

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

jQuery有许多遍历方法，可以让您从给定的点穿越DOM结构。

如果你只想要孩子和孙子，而没有更深层次的东西，那么就这样做：

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

这将仅给你2代深的

元素。

如果您不想将其限制为

元素，请执行以下操作：

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

- user113716

我相信您的意思是 $('parent,parent *').toArray()，对吗？ - Brad Christie

@Patrick DW，这会同时获取子节点和孙子节点吗？ - Kevin Bowersox

@kmb385：问题标题和正文似乎有点不同步，但我更新了我的答案，以防 OP 实际上只是指特定节点，而不是整个集合。 - user113716

1

嘿，我是新来的，之前也遇到了类似的问题。为了获取子元素，我建议使用.children()方法：

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

- neaumusic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Salman A · Accepted Answer

您可以使用*选择器检索子元素和孙子元素。这些项目将按树顺序返回。然后，您可以使用jQuery.toArray()获得元素的纯数组：

$(function() {
  let a = $("#wrapper")
    .find("*")
    .addBack() // add the previous match i.e. #wrapper itself to the collection
    .toArray();
  console.log(a);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>