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

Question

我正在开发一个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()的语法来查找每个后续元素，那么我如何确定该元素的类别？是否有比我提出的解决方案更快的方法？提前感谢您。

- Richard

---

你的意思是像 $a.next('.leave-gap') 这样吗？ - cforcloud

你可以通过$(element).hasClass('leave-gap')来检查一个类是否存在。 - alphakevin

感谢所有的评论。我需要试一试这个。从我的问题中，你可能可以看出我对Javascript还比较新，并且这是一个“午餐时间”的项目。你们都非常有帮助！ - Richard

Answer 1

假设您已经找到了阻挡你前进的元素，要查找该元素的类，请使用以下代码： $(element).attr("class") 或者，您可以验证该类是否符合您的要求： $(element).hasClass("className")

- venkata krishnan

Answer 2

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

- alphakevin

Answer 3

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

- Xotic750

---

为什么要使用冗长的普通代码，如果可以用jQuery在两行内完成呢？ - Emrys Myrooin

有比我提出的解决方案更快的方法吗？这个更快的2行jQuery代码在哪里？ - Xotic750

问题标题为“在JavaScript/jQuery中迭代网页元素的最佳方法”，问题开头句子为“我正在开发一个Chrome扩展程序”。 - Xotic750

Answer 4

你也可以通过 class 名称 隐藏 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(), class-selector

- SK.

---

谢谢Mike。我如何使用这种技术隐藏<p>"一些文本"</p>部分？ - Richard

$('p').hide() - 我说过我对这些东西很新手！ - Richard