How can I select every single element with JS or jQuery?

Question

I want to select every single element in a document and make them color red when I scroll to them.

$(document).ready(function() {
  $(document).on("scroll", animationDivs);

  function animationDivs(event) {
    var scrollPos = $(document).scrollTop();

    var divs = $("*");
    $(divs).each(function() {
      var currLink = $(this);
      if (currLink.position().top <= scrollPos && currLink.position().top + currLink.height() > scrollPos) {
        currLink.style.color = "red";
      }
    });
  };
});

I used this codes but didn't work.

_"I used this codes but didn't work."_ Can you create a stacksnippets to demonstrate? See https://stackoverflow.com/help/mcve — guest271314, Feb 17 '19 at 01:52

saylestyler · Answer 1 · 2019-02-17T08:38:18.403

1

using JS:

document.querySelectorAll('*')
        .forEach(el => el.style.color = 'red')

Try it in the console of your browser to see how it works and here's a brief overview of DOM selection with JS vs jQuery.

This is a similar question with a variety of solutions.

edited Feb 17 '19 at 08:38

answered Feb 17 '19 at 01:48

saylestyler

141
1
15

Not only div elements, I want to select "every single" elements in the document. – Tarikul Islam Feb 17 '19 at 02:01

score 0 · Answer 2 · answered Feb 17 '19 at 02:05

First add some common css class on each divs and add following jquery.

$('.class-name').each(function() {
   var currLink = $(this);
   if (currLink.position().top <= scrollPos && currLink.position().top + currLink.height() > scrollPos) {
   currLink.style.color = "red";
   }
});

score 0 · Answer 3 · answered Feb 17 '19 at 02:48

0

using jq, you could simple get all element withing the html by "*"

var items = $("*").css({background : "red"})

console.log(items)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

<p></p>

answered Feb 17 '19 at 02:48

Alen.Toma

4,792
2
11
24

score 0 · Answer 4 · answered Feb 17 '19 at 02:59

currLink is a jQuery object in your code. So use a jQuery method on it.

That would be the .css() method in your case.

And I suggest you use an else part to your condition so the elements does not turn red after the first single wheel spin... Since <body> is also collected in $("*").

$(document).ready(function() {
  $(document).on("scroll", animationDivs);

  function animationDivs(event) {
    var scrollPos = $(document).scrollTop();

    var divs = $("*");
    $(divs).each(function() {
      var currLink = $(this);
      if (currLink.position().top <= scrollPos && currLink.position().top + currLink.height() > scrollPos) {
        currLink.css({"color":"red"});
      }else{
        currLink.css({"color":"initial"});
      }
    });
  };
});

.spacer{
  height:500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br>
<span>Scroll me.</span>
<div class="spacer"></div>
<div>div
  <p>paragraph</p>
  <a>anchor</a>
  <span>span</span>
</div>
<div class="spacer"></div>

By the way... Using an .each() loop on the $("*") collection on every scroll event is the worst jQuery usage I suppose I will ever see. I can assure you that you'll scratch your head pretty soon with a real web page with real content.

Every elements, including <br> and <script> and <link> etc. are collected using $("*") that way... And are compared in the loop. You should only use it when absolutely necessary and within at least a container to lower the amount of collected elements.... Like $(".some-class *").

How can I select every single element with JS or jQuery?

4 Answers4