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

best way to iterate over elements of web page in JavaScript/jQuery

本文关键字：元素 最佳 方式 网页 迭代 JavaScript jQuery      更新时间：2023-09-26

我正在开发一个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>

基本上，在某些条件下，我将隐藏在第一个leave-gap类和block-footer类之间。

我建议如下查找loud类：

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

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

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

提前谢谢。

假设您以自己的方式找到了元素，要找到元素的类，

$(element).attr("class")

或者你可以验证这个类是你想要的，

$(element).hasClass("className")

您可以使用$(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>

现代Javascript中的一种可能性。

var firstLeaveGaps = document.querySelectorAll('.wrapper .leave-gap:first-of-type');
Array.prototype.forEach.call(firstLeaveGaps, function (leaveGap) {
    var next = leaveGap.nextElementSibling;
    while (next) {
        if (next.classList.contains('block-footer')) {
            break;
        }
        
        next.style.display = 'none';
        next = next.nextElementSibling;
    }
});
<div class="wrapper">
  <span class="loud" style="text-decoration: none;">loud</span>
  <div class="leave-gap">leave-gap</div>
  <p>"Some text"</p>
  <span id="id_12345" class="none">id</span>
  <div class="block-footer">block-footer</div>
  <div class="leave-gap">leave-gap</div>
</div>
<div class="wrapper">
  <span class="loud" style="text-decoration: none;">loud</span>
  <div class="leave-gap">leave-gap</div>
  <p>"Some text"</p>
  <span id="id_54321" class="none">id</span>
  <div class="block-footer">block-footer<div>
  <div class="leave-gap">leave-gap</div>
</div>

您也可以用class name隐藏div标记。

$(document).ready(function() {
//may be you can put the below in a function and call it when you condition meet.
    $('.leave-gap').hide();
    $('.block-footer').hide();
});

工作Plunker

其他链接：find((，类选择器

相关文章：