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

Спасибо

P.S. Обратите внимание, что это не может быть что-то вроде селектора $ ('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>

Следующее является излишним, но полезно, если вас больше интересует повторение иерархии 1016 * с использованием рекурсии:

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() ^{[документы]} , чтобы превратить ваш объект jQuery в массив.

var arr = my_obj.toArray();

... или get() ^{[документы]} метод, если вы не передадите ему какие-либо аргументы.

var arr = my_obj.get();

---

Если я неправильно понял, и вы указываете на корень структуры, и вам нужно получить ее потомков, используйте find() ^{[документы ]} метод метод.

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('> * > *');

Answer 3

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

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