Geek Answers Handbook

Best way to iterate over webpage elements in JavaScript / jQuery

I am developing a Chrome extension and trying to iterate over elements of a webpage that has multiple instances of the format shown below:

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

Basically, under certain conditions I will be hiding between the first class leave-gapand the class block-footer.

I suggest finding classes loudas follows:

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

Assuming I'm using form syntax $a.next()to search for each subsequent element, how would I define the element class?

Is there a faster way to do this than our solution?

Thanks in advance.

+4
source share
4 answers

$(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>
Hide result
+1

, , ,

$(element).attr("class")

, , ,

$(element).hasClass("className")

+4

One opportunity in modern 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>
Run codeHide result
+1
source

You can hide the tag divwith class name.

$(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

Another link: find () , class-selector

0
source

More articles:


All Articles