get text content with loop of div with same class

Question

I have this code:

 <div class="user-fields-list"> <div class="user-field"> <div class="label">A</div> </div> <div class="user-field"> <div class="label">B</div> </div> <div class="user-field"> <div class="label">C</div> </div> <div class="user-field"> <div class="label">D</div> </div> </div> 

I want to get all the text content of the "label" divs. How can I do that?

EDIT: I need a loop because later I need to do some "if" conditions based on the text content of each div

Thanks all!

Answer 1

You can use a query selector and forEach to get the textContent of each of the div s with a certain class.

 <div class="user-fields-list"> <div class="user-field"> <div class="label">A</div> </div> <div class="user-field"> <div class="label">B</div> </div> <div class="user-field"> <div class="label">C</div> </div> <div class="user-field"> <div class="label">D</div> </div> </div> <script> var text = ""; document.querySelectorAll(".label").forEach(div=>{ text+=div.textContent; }); console.log(text); </script> 

Answer 2

You can use document.querySelectorAll('.label') to select all div with class label and loop over that to get its content:

 var targetDiv = document.querySelectorAll('.label'); for(var i=0; i<targetDiv.length;i++){ if(targetDiv[i].textContent === "A"){ targetDiv[i].style.background = 'red'; } } 

 <div class="user-fields-list"> <div class="user-field"> <div class="label">A</div> </div> <div class="user-field"> <div class="label">B</div> </div> <div class="user-field"> <div class="label">C</div> </div> <div class="user-field"> <div class="label">D</div> </div> </div> 

Answer 3

You can use the class selector as following:

 var lab = document.getElementsByClassName("label"); for (var i = 0; i < lab.length; i++) { console.log(lab[i].innerHTML); //You can use innerHTML or textContent according to your need } 

 <div class="user-fields-list"> <div class="user-field"> <div class="label">A</div> </div> <div class="user-field"> <div class="label">B</div> </div> <div class="user-field"> <div class="label">C</div> </div> <div class="user-field"> <div class="label">D</div> </div> </div> 

Answer 4

<div class="user-fields-list"> 
<?php foreach (range('A', 'Z') as $column){ ?>
  <div class="user-field">
      <div class="label"><?php echo $column; ?></div> 
  </div>
<?php } ?>
</div>

Answer 5

Simple for loop iteration through the webelement array and string concat should do the trick!

var elems = document.getElementsByClassName('label');
var stringToConcat = "";

for (i = 0; i < elems.count; i++) { 
     stringToContact.concat(elems[i].text)
}

console.log(stringToConcat);

Answer 6

I would iterate through like this. Initially get all the .user-field divs and after wards just forEach the nodes you received.

 let fieldsList = document.querySelectorAll('.user-fields-list .user-field'); fieldsList.forEach((currentValue, currentIndex) => { console.log(currentValue.innerText, currentIndex); }) 

 <div class="user-fields-list"> <div class="user-field"> <div class="label">A</div> </div> <div class="user-field"> <div class="label">B</div> </div> <div class="user-field"> <div class="label">C</div> </div> <div class="user-field"> <div class="label">D</div> </div> </div> 

Answer 7

You can use document.getElementsByClassName('label'); to select all div with class label

   var items = document.getElementsByClassName('label');
        for (var i = 0; i < items.length; i++)
           console.log(items[i].textContent);