最好的辦法網頁的元素迭代在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()的語法來找到每個隨後的元素，我將如何確定類的元素呢？

有沒有比我提出的解決方案更快的方法？

在此先感謝。

Answer 1

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

Answer 2

假設你發現在你途中的元素，找到類的元素，

$(element).attr("class")

，或者你可以驗證類是你想要的，

$(element).hasClass("className")

Answer 3

您也可以用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(); 
}); 

Working Plunker

Other link: find()，class-selector

Answer 4

一個現代的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>