如何使用 JS 或 jQuery 选择每个元素？
[英]How can I select every single element with JS or jQuery?
问题描述
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.我使用了这个代码，但没有用。
4 个解决方案
解决方案1
1 2019-02-17 01:48:43
using JS:使用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.在浏览器的控制台中尝试一下，看看它是如何工作的，这里是使用 JS 与 jQuery 进行 DOM 选择的简要概述。
This is a similar question with a variety of solutions.这是一个类似的问题，有多种解决方案。
解决方案2
0 2019-02-17 02:05:58
First add some common css class on each divs and add following jquery.首先在每个 div 上添加一些常见的 css 类并添加以下 jquery。
$('.class-name').each(function() {
var currLink = $(this);
if (currLink.position().top <= scrollPos && currLink.position().top + currLink.height() > scrollPos) {
currLink.style.color = "red";
}
});
解决方案3
0 2019-02-17 02:48:49
using jq, you could simple get all element withing the html by "*"使用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>
解决方案4
0 2019-02-17 02:59:42
currLink is a jQuery object in your code. currLink是代码中的 jQuery 对象。 So use a jQuery method on it.所以在它上面使用一个 jQuery 方法。
That would be the .css() method in your case.在您的情况下，这将是.css()方法。
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 $("*") .我建议你使用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>
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.顺便说一句......在每个scroll事件的$("*")集合上使用.each()循环是我想我见过的最糟糕的jQuery 用法。 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.每个元素，包括<br>和<script>和<link>等，都使用$("*")这样收集......并在循环中进行比较。 You should only use it when absolutely necessary and within at least a container to lower the amount of collected elements.... Like $(".some-class *") .你应该只在绝对必要时使用它，并且至少在一个容器内使用它来减少收集元素的数量......就像$(".some-class *") 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.