Получить div из списка div с определенным классом

Question

У меня есть list из div и хотите получить div, если они содержат указанный класс, например state-expanded. Например, у меня есть два разных divs:

<div class="row-popular state-expanded no-sibling-group"> 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
     <span>TEST</span> 
    </span> 
</div> 

<div class="row-popular state-collapsed no-sibling-group"> 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
     <span>OTHER</span> 
    </span> 
</div> 

Первый div имеют государственную state-expanded и второй state-collapsed. Я хочу получить значение span, где класс в div - state-expanded.

Это list декларация:

var allDivs = document.getElementsByTagName('div'); 

В примере, как я пишу выше, он должен возвращать значение TEST. Только JavaScript - не jquery и т.д.

Любая идея, как это получить?

Answer 1

Вы можете использовать querySelectorAll, чтобы выбрать все дивы, а затем проверить каждый, чтобы увидеть, если она включает в себя класс DEMO

var divs = document.querySelectorAll('div'); 
for (var i = 0; i < divs.length; i++) { 
    if (divs[i].getAttribute('class').includes('state-expanded')) { 
    console.log(divs[i].querySelector('span').innerHTML); 
    } 
} 

Edit: также, если вы хотите изменить текст этого последнего диапазона ребенка вы можете сделать это, как это Demo

Answer 2

Вы можете использовать

document.getElementsByClassName('state-expanded') С помощью JavaScript и если вы используете JQuery.

$('.state-expanded')

Answer 3

попробовать это - var neededDiv = document.getElementsByClassName('state-expanded')[0] или вы можете также использовать querySelector так:

var neededDiv = document.querySelector('.state-expanded'); 

или

var neededDiv = document.querySelector('.state-expanded span span'); 

, если вам нужно получить вложенные промежуток с 'TEST' код (в соответствии с вашим примером)

Answer 4

Вот еще один ответ.

var data = document.getElementsByClassName('state-expanded')[0]; 
var data1 = data.getElementsByTagName('span')[1].innerHTML; 

console.log(data1); 

Выход: TEST

Что это будет сделано, во-первых, в переменной данных он будет получать «состояние вспененные» DIV в нем, то во второй строке мы получаем второй пролет значения (innerHTML), поэтому он вернет ТЕСТ.

Вот скрипка: https://jsfiddle.net/9p9ygd01

Answer 5

Try с этим ниже кода ...

$(document).ready(function(){ 
 
    var $element = $('.state-expanded span span').html(); 
 
    alert($element); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="row-popular state-expanded no-sibling-group"> 
 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
 
     <span>TEST</span> 
 
    </span> 
 
</div> 
 

 
<div class="row-popular state-collapsed no-sibling-group"> 
 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
 
     <span>OTHER</span> 
 
    </span> 
 
</div>

Answer 6

Вы можете использовать querySelectorAll как:

var txt = document.querySelectorAll('div.state-expanded span span')[0].textContent; 

querySelectorAll возвратит калибровочный элемент, содержащийся в промежутке, который содержится в DIV с классом состояния вспененные.

querySelectorAll возвращает NodeList, но поскольку в вашем случае есть только один элемент, вы можете взять первый (например: [0]).

Для текста, содержащегося внутри, вы можете использовать атрибут textContent.

Если вместо этого вы должны цикла на всех результатов, полученных с помощью querySelectorAll вам необходимо преобразовать NodeList в массив и чем использовать forEach функции, как:

[].slice.call(document.querySelectorAll('div.state-expanded span span')).forEach(function(currValue, index) { 
    alert(currValue.textContent); 
}); 

window.onload = function() { 
 
    var txt = document.querySelectorAll('div.state-expanded span span')[0].textContent; 
 
    document.body.innerHTML += '<br>Result: ' + txt; 
 

 
    [].slice.call(document.querySelectorAll('div.state-expanded span span')).forEach(function(currValue, index) { 
 
    document.body.innerHTML += '<br>Result in forEach loop: index=' + index + ' textContent=' + currValue.textContent; 
 
    }); 
 
};

<div class="row-popular state-expanded no-sibling-group"> 
 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
 
     <span>TEST</span> 
 
    </span> 
 
</div> 
 

 
<div class="row-popular state-collapsed no-sibling-group"> 
 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
 
     <span>OTHER</span> 
 
    </span> 
 
</div>