Как я могу выбрать каждый элемент с помощью JS или jQuery? - PullRequest
Новая
       11

Как я могу выбрать каждый элемент с помощью JS или jQuery?

0 голосов
/ 17 февраля 2019

Я хочу выделить каждый элемент в документе и сделать его красным при прокрутке. 

$(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";
      }
    });
  };
});

Я использовал эти коды, но не работал.

Ответы [ 4 ]

0 голосов
/ 17 февраля 2019

currLink - это объект jQuery в вашем коде.Так что используйте метод jQuery для него.

Это будет .css() метод в вашем случае.

И я предлагаю вам использовать else часть для вашегоусловие, чтобы элементы не становились красными после первого вращения одного колеса ... Так как <body> также собирается в $("*"). 

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

Кстати ... Использование цикла .each() в коллекции $("*") на каждом scrollсобытие - это худшее использование jQuery, которое я когда-либо увижу.Я могу заверить вас, что вы скоро поцарапаете голову настоящей веб-страницей с реальным контентом.

Все элементы, включая <br> и <script> и <link> и т. Д., Собираются с использованием $("*") таким образом ... И сравниваются в цикле.Вы должны использовать его только тогда, когда это абсолютно необходимо и как минимум в контейнере, чтобы уменьшить количество собираемых элементов .... Как и $(".some-class *").

0 голосов
/ 17 февраля 2019

Сначала добавьте несколько общих классов CSS в каждый div и добавьте следующий jquery. 

$('.class-name').each(function() {
   var currLink = $(this);
   if (currLink.position().top <= scrollPos && currLink.position().top + currLink.height() > scrollPos) {
   currLink.style.color = "red";
   }
});
0 голосов
/ 17 февраля 2019

используя jq, вы можете просто получить все элементы в html с помощью "*" 

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>
0 голосов
/ 17 февраля 2019

с использованием JS: 

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

Попробуйте в консоли вашего браузера посмотреть, как это работает, и вот краткий обзор выбора DOM с JS против jQuery.

Этот является аналогичным вопросом с различными решениями.

...