JQuery, восстановить детей и внуков

Скажем, у меня есть объект 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 > div'), потому что у меня уже есть Объект JQuery и только с этого объекта мне нужно взять материал.

Ответ 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>

Ответ 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 имеет множество методов обхода, которые позволяют обойти структуру DOM из заданной точки.

Если вы хотели только детей и внуков, и ничего глубже, сделайте следующее:

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

Это даст вам div всего лишь 2 поколения глубины.

Если вы не хотите ограничивать его элементами div, выполните следующие действия:

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

Ответ 3

Эй, парень, я здесь довольно новый, и у меня был похожий мозговой пердит. Чтобы получить внуков, я предлагаю использовать подход .children():

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