Найдите, какой n-й дочерний элемент div находится внутри другого div

#javascript

#JavaScript

Вопрос:

Поиск решения этого приведет к решению проблемы более высокого уровня, которая у меня есть

 <div>
  <div class='childDiv'></div>
  <div class='childDiv'></div>
  <div class='childDiv'></div>
</div>

var childrenDivs = document.querySelectorAll('childDiv');

childrenDivs.forEach(function(value) {
  console.log('This is child number: '   [insert code]);
});
 

Я хочу, чтобы он выводил

 This is child number: 1
This is child number: 2
This is child number: 3
 

Я не могу понять, как найти дочернюю позицию value . Возможно ли это?

Ответ №1:

 childrenDivs.forEach(function(value, i) {
  console.log('This is child number: '   (i   1));
});
 

Функции более высокого порядка, такие как forEach() , обычно возвращают итератор (он же индекс текущего значения в массиве) в качестве второго и необязательного параметра.

Поскольку массивы индексируются, начиная с 0, но мы хотим начать с 1, нам нужно всегда добавлять 1 к итератору, прежде чем регистрировать его в консоли.

Ответ №2:

вы забыли поставить . before childDiv в childrenDivs = document.querySelectorAll('.childDiv');

 <div>
    <div class='childDiv'></div>
    <div class='childDiv'></div>
    <div class='childDiv'></div>
</div>
<script>
    var childrenDivs = document.querySelectorAll('.childDiv');
    console.log(childrenDivs);
    childrenDivs.forEach(function(currentValue, index) {
        console.log('This is child number: '   index   1);
    });
</script>
 

и вы должны добавить index аргумент в свою функцию.

forEach также может иметь третий аргумент. но второе и третье являются необязательными.

https://www.w3schools.com/jsref/jsref_foreach.asp