Перебрать всех детей div - PullRequest
Новая
       62

Перебрать всех детей div

0 голосов
/ 23 октября 2019

Я занят страницей, которая будет загружать некоторую информацию из базы данных, но для этого мне сначала нужно объявить кое-что. Но мне нужно получить доступ ко всем элементам внутри html-объекта. Поэтому, если мой HTML-код выглядит следующим образом: 

    <div class="container">
        <div class="parent1">
            <div class="child1ofparent1"></div>
            <div class="child2ofparent1"></div>
            <div class="child3ofparent1"></div>
        </div>
        <div class="parent2">
            <div class="child1ofparent2"></div>
            <div class="child2ofparent2"></div>
            <div class="child3ofparent2"></div>
        </div>
        <div class="parent3">
            <div class="child1ofparent3"></div>
            <div class="child2ofparent3"></div>
            <div class="child3ofparent3"></div>
        </div>
    </div>

Я хочу просмотреть все дочерние элементы, просто вызвав $(".container");

Теперь я делаю это, просто просматриваявсе жестко закодировано, но так как приложение будет использоваться моей школой, некоторые вещи должны быть более гибкими.

Я уже пробовал это: 

$(".container > *").each(function(i, element) {
       console.log(element);
    });

Но это возвращает только первых детей (. parent1, .parent2, .parent3).

Ответы [ 5 ]

2 голосов
/ 23 октября 2019

Вы используете дочерний комбинатор - ".container > *". Используйте потомок комбинатор вместо - ".container *". 

$(".container *").each(function(i, element) {
  console.log(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parent1">
    <div class="child1ofparent1"></div>
    <div class="child2ofparent1"></div>
    <div class="child3ofparent1"></div>
  </div>
  <div class="parent2">
    <div class="child1ofparent2"></div>
    <div class="child2ofparent2"></div>
    <div class="child3ofparent2"></div>
  </div>
  <div class="parent3">
    <div class="child1ofparent3"></div>
    <div class="child2ofparent3"></div>
    <div class="child3ofparent3"></div>
  </div>
</div>
1 голос
/ 23 октября 2019

Хотя остальные ответы верны, универсальный селектор (*) следует по возможности не поощрять из-за того, что он соответствует любому элементу, а не только тому, который вы ищете, в зависимости от вашей DOM дерево, может оказать существенное влияние на вашу производительность. Вы можете использовать селектор атрибутов, такой как показан ниже: 

$(function () {

  var $output = $('#output');

  $('.container [class^="child"]').each(function () {
    var $this = $(this);
    $('<li />', { text: $this.prop('nodeName') + " w/ class " + $this.attr('class') }).appendTo($output);
  });

});
h1 {
  font-family: Arial, sans-serif;
  font-size: 16;
}
#output {
  list-style-type: square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="parent1">
            <div class="child1ofparent1"></div>
            <div class="child2ofparent1"></div>
            <div class="child3ofparent1"></div>
        </div>
        <div class="parent2">
            <div class="child1ofparent2"></div>
            <div class="child2ofparent2"></div>
            <div class="child3ofparent2"></div>
        </div>
        <div class="parent3">
            <div class="child1ofparent3"></div>
            <div class="child2ofparent3"></div>
            <div class="child3ofparent3"></div>
        </div>
    </div>
    <h1>Selected Elements:</h1>
    <ul id="output"></ul>

Ссылка: Атрибут начинается с селектора [name^=”value”]

0 голосов
/ 23 октября 2019

Мое собственное предложение. Используйте div для определения желаемого уровня вложенности.

Для первого родителя используйте 

$(".container > div").each(function(i, element) {
  console.log(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parent1">
    <div class="child1ofparent1"></div>
    <div class="child2ofparent1"></div>
    <div class="child3ofparent1"></div>
  </div>
  <div class="parent2">
    <div class="child1ofparent2"></div>
    <div class="child2ofparent2"></div>
    <div class="child3ofparent2"></div>
  </div>
  <div class="parent3">
    <div class="child1ofparent3"></div>
    <div class="child2ofparent3"></div>
    <div class="child3ofparent3"></div>
  </div>
</div>

Только для детей с родителями 

$(".container div div").each(function(i, element) {
  console.log(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parent1">
    <div class="child1ofparent1"></div>
    <div class="child2ofparent1"></div>
    <div class="child3ofparent1"></div>
  </div>
  <div class="parent2">
    <div class="child1ofparent2"></div>
    <div class="child2ofparent2"></div>
    <div class="child3ofparent2"></div>
  </div>
  <div class="parent3">
    <div class="child1ofparent3"></div>
    <div class="child2ofparent3"></div>
    <div class="child3ofparent3"></div>
  </div>
</div>

Для всех детей: использование родителями и детьми 

$(".container div").each(function(i, element) {
  console.log(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parent1">
    <div class="child1ofparent1"></div>
    <div class="child2ofparent1"></div>
    <div class="child3ofparent1"></div>
  </div>
  <div class="parent2">
    <div class="child1ofparent2"></div>
    <div class="child2ofparent2"></div>
    <div class="child3ofparent2"></div>
  </div>
  <div class="parent3">
    <div class="child1ofparent3"></div>
    <div class="child2ofparent3"></div>
    <div class="child3ofparent3"></div>
  </div>
</div>
0 голосов
/ 23 октября 2019

Вы были близки. ".container > *" означает поиск только детей, а не всех потомков.

Удалите символ >, чтобы зациклить потомков. 

$(".container *").each(function(i, element) {
  console.log(element.classList[0]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="parent1">
            <div class="child1ofparent1"></div>
            <div class="child2ofparent1"></div>
            <div class="child3ofparent1"></div>
        </div>
        <div class="parent2">
            <div class="child1ofparent2"></div>
            <div class="child2ofparent2"></div>
            <div class="child3ofparent2"></div>
        </div>
        <div class="parent3">
            <div class="child1ofparent3"></div>
            <div class="child2ofparent3"></div>
            <div class="child3ofparent3"></div>
        </div>
    </div>
0 голосов
/ 23 октября 2019

Это вернет всех детей, у которых .container является предком 

    $("*", ".container").each(function(i, element) {
       console.log(element);
    });
...