jquery - 循环遍历嵌套的 DIV 元素

Question

遍历嵌套 div 元素以获取标签文本的最佳方法是什么？

<div id="parent">
  <div id="div0">
    <span class="ui-icon"></span>
    <label>some data</label>
  </div>
  <div id="div1">
    <span class="ui-icon"></span>
    <label>some data1</label>
  </div>
  <div id="div2">
    <span class="ui-icon"></span>
    <label>some data2</label>
  </div>
</div>

尝试类似以下操作但未定义，

$('#parent > div > span > label').each(function () {
                    console.log($(this).value); // "this" is the current element in the loop
 });

Answer 1

您有两个问题:

1) 当 span 是同级时，您的选择器正在寻找作为 span 子级的 label。使用sibling combinator相反

2) 标签没有值，它们有 innerHtml , textContent等等。对于jquery，你想使用 .text() ;

$(document).ready(function() {
  $('#parent > div > span + label').each(function() {
    console.log($(this).text()); // "this" is the current element in the loop
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <div id="div0">
    <span class="ui-icon"></span>
    <label>some data</label>
  </div>
  <div id="div1">
    <span class="ui-icon"></span>
    <label>some data1</label>
  </div>
  <div id="div2">
    <span class="ui-icon"></span>
    <label>some data2</label>
  </div>
</div>