Как получить массив только из нужного родительского класса?

416

18 сентября 2017, 05:37

Нужно получить массив элементов с классом.

var blocks = document.getElementsByClassName('class');

И получаю их со всей страницы,( они у меня есть в 3 секциах разных) однако мне надо их получить из одной секции. Секции имеют уникальные классы. Вопрос как получить только элемент которые дочерние для секции которая мне требуется

<section class='nr1'>
<div class='test'> test1</div>
<div class='test'> test2</div>
<div class='test'> test3</div>
<div class='test'> test4</div>
</section>
<section class='nr2'>
<div class='test'> test1</div>
<div class='test'> test2</div>
<div class='test'> test3</div>
<div class='test'> test4</div>
</section>
<section class='nr3'>
<div class='test'> test1</div>
<div class='test'> test2</div>
<div class='test'> test3</div>
<div class='test'> test4</div>
</section>

Как получить элементы с классом test из секции с классом nr3?

Answer 1

Например, так:

var blocks = document.querySelectorAll('.nr2 .test'); 
console.log(blocks.length); 
for (var i = 0; i < blocks.length; i++) { 
  console.log(blocks[i].textContent); 
}

<section class='nr1'> 
  <div class='test'> test1.1</div> 
  <div class='test'> test1.2</div> 
  <div class='test'> test1.3</div> 
  <div class='test'> test1.4</div> 
</section> 
 
 
<section class='nr2'> 
  <div class='test'> test2.1</div> 
  <div class='test'> test2.2</div> 
  <div class='test'> test2.3</div> 
  <div class='test'> test2.4</div> 
</section> 
 
 
<section class='nr3'> 
  <div class='test'> test3.1</div> 
  <div class='test'> test3.2</div> 
  <div class='test'> test3.3</div> 
  <div class='test'> test3.4</div> 
</section>

Или так:

var section = document.getElementsByClassName('nr2')[0], 
  blocks = section.querySelectorAll('.test'); 
console.log(blocks.length); 
for (var i = 0; i < blocks.length; i++) { 
  console.log(blocks[i].textContent); 
}

<section class='nr1'> 
  <div class='test'> test1.1</div> 
  <div class='test'> test1.2</div> 
  <div class='test'> test1.3</div> 
  <div class='test'> test1.4</div> 
</section> 
 
 
<section class='nr2'> 
  <div class='test'> test2.1</div> 
  <div class='test'> test2.2</div> 
  <div class='test'> test2.3</div> 
  <div class='test'> test2.4</div> 
</section> 
 
 
<section class='nr3'> 
  <div class='test'> test3.1</div> 
  <div class='test'> test3.2</div> 
  <div class='test'> test3.3</div> 
  <div class='test'> test3.4</div> 
</section>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу модифицировать скрипт?

При нажатий на блок открывается его dropdownВсего блоков 12, соответственно 12 dropdown

313

javascript

Если условие выполнено, то открыть окно

Есть два input, если в оба инпута ввели правильные данные допустим в первый input "123", а во второй input "123ABC" и если все правильно, показать модульное...

442

javascript

Как прикреплять файлы в форме обратной связи поочередно?

В форме обратной связи есть возможность прикреплять к письму файлы

290

javascript

как найти елементы по классу в обьекте

как можно найти елементы по классу используя обьекты, проблема с этим кодом что он не находим елементы которые мы задаем в var rect = new Rectangle("elem",...

327