在JavaScript / jQuery中迭代网页元素的最佳方法

我正在开发Chrome扩展程序并尝试迭代网页的元素,该网页包含以下格式的多个实例：

<div class="wrapper">
  <span class="loud" style="text-decoration: none;">...</span>
  <div class="leave-gap">...</div>
  <p>"Some text"</p>
  <span id="id_12345" class="none">...</span>
  <div class="block-footer">...</div>
  <div class="leave-gap">...</div>
</div>

基本上在某些条件下,我将隐藏在第一个留空班和街区班级班之间.

我建议找到如下大声的课程：

$('.wrapper .loud').each(function() 
{
  var $a = $(this);
  ...

假设我使用$a.next()形式的语法来查找每个后续元素,我将如何确定元素的类？

有没有比我提出的解决方案更快的方法？

提前致谢.

解决方法:

你可以使用$(element).children().each(loopfunction)来完成这个技巧.

假设您要隐藏两个特定元素之间的所有内容.

检查测试用例：

$('.wrapper').each(function() {
    var foundgap = false
    $(this).children().each(function(){
        if ($(this).hasClass('leave-gap')) {
            foundgap = true; // mark the beginning of block
            return;
        } else if ($(this).hasClass('block-footer')) {
            return false; // meet the end, break 'each' loop
        } else if (foundgap) {
            $(this).hide(); // I'm inside the block. do whatever you need
        }
    })
});

*:not(body):not(html) {
    border: 1px solid blue;
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="loud" style="text-decoration: none;">loud1</span>
  <div class="leave-gap">leave-gap</div>
  <p>"Some text"</p>
  <span id="id_12345" class="none">id</span>
  <div class="block-footer">fotter</div>
  <div class="leave-gap">leave-gap</div>
</div>
<div class="wrapper">
  <span class="loud" style="text-decoration: none;">loud2</span>
  <div class="leave-gap">leave-gap</div>
  <p>"Some text"</p>
  <span id="id_12345" class="none">id</span>
  <div class="block-footer">fotter</div>
  <div class="leave-gap">leave-gap</div>
</div>