Get div from div list with specific class

Question

I have list of div and want get div when contain specified class like state-expanded . For example I have got two different 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>

First div have state state-expanded and second state-collapsed . I want get value of span where class in div is state-expanded .

This list declaration:

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

In example as I write above, It should return value TEST . Please only JavaScript - not jquery etc.

Any idea how get it?

Answer 1

You can use querySelectorAll to select all divs and then check each to see if it includes class 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: also if you want to change text of that last span child you can do it like this Demo

Answer 2

You can use

document.getElementsByClassName('state-expanded') with javascript and if you are using jQuery.

$('.state-expanded')

Answer 3

try this - var neededDiv = document.getElementsByClassName('state-expanded')[0] or you can also use querySelector like this:

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

or

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

if you need to get nested span with 'TEST' code in it.(According to your example)

Answer 4

Here is another answer.

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

console.log(data1);

Output : TEST

What it will done is, First in data variable it will get the 'state-expanded' div in it then in second line we are getting the second span of value(innerHTML) so it will return TEST.

Here is a fiddle : https://jsfiddle.net/9p9ygd01

Answer 5

Try with this below code...

 $(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

You may use querySelectorAll like:

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

querySelectorAll will return the span element contained in a span that is contained in a div with the class state-expanded.

querySelectorAll returns a NodeList, but because in your case there is only one element you can take the first one (ie: [0]).

For the text contained inside you may use the textContent attribute.

If instead you need to cycle on all the results obtained using querySelectorAll you need to convert NodeList to array and than use the forEach function like:

[].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>