使用同一个类的div循环获取文本内容

时间:2018-08-08 13:20:36

标签: javascript html loops

我有此代码:

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

我想获取“标签” div的所有文本内容。 我怎样才能做到这一点?

编辑: 我需要一个循环,因为稍后我需要根据每个div的文本内容执行一些“ if”条件

谢谢!

7 个答案:

答案 0 :(得分:2)

您可以使用document.querySelectorAll('.label')来选择类label的所有div并对其进行循环以获取其内容:

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>

答案 1 :(得分:2)

您可以按以下方式使用类选择器:

axios.get('http://my.domain/user?ID=12345')
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
}

答案 2 :(得分:2)

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

答案 3 :(得分:2)

通过webelement数组和字符串concat进行简单的for循环迭代应该可以解决问题!

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

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

console.log(stringToConcat);

答案 4 :(得分:2)

您可以使用查询选择器和forEach来获取具有特定类的每个div的textContent。

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

答案 5 :(得分:2)

我会这样迭代。 最初获取所有.user-field的div,然后在病房中仅获取您收到的每个节点。

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>

答案 6 :(得分:1)

您可以使用document.getElementsByClassName('label');来选择所有div类的label

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