javascript - 如何遍历一组异构元素？

Question

我想遍历一些 HTML 元素并获取它们的值。我尝试使用$.each()它，但是当一个元素中包含其他变量类型的元素时，我不知道该怎么做。我的 HTML DOM 结构为：

<li>
 <div>X</div>
 <br/>
 <span>Category : </span>
 <div>Y</div>
 <span><br/>Rating</span>
 <div>
 <span>Z</span>
</div>

我想从中检索值X , Y , Z。还有多个这样的实例，所以我将不得不遍历它们中的每一个。任何人都可以提出一些解决方法吗？

Answer 1

将您感兴趣的元素分配给class：

<li>
 <div class="value">X</div>
 <br/>
 <span>Category : </span>
 <div class="value">Y</div>
 <span><br/>Rating</span>
 <div>
 <span class="value">Z</span>
</div>

然后按类选择值：

$('.values').each(function() {
  console.log($(this).text())
})

Answer 2

或者

$('li > div').each(function(){
    console.log($(this).text())
})

-编辑-

如果您不希望这些跨度内的任何内容，您可以尝试：

$('li > div').each(function(){
      var $tmp =  $(this).clone();
      $tmp.find('span').remove();
      console.log($tmp.text());

})

Answer 3

看起来您正在text阅读. 所以试试divli

$('li').children('div').each(function(){
    console.log($(this).text())
})