为什么：nth-child() 在 JavaScript 中不起作用？

Question

 $("#oddcolor")[0].onclick = function() { $(".coltest:nth-child(odd)")[0].style.backgroundColor = "red"; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <button id="oddcolor">Click me</button>

它似乎只适用于第一个奇数元素，然后停止。 为什么它不适用于所有奇怪的元素？

我试过使用querySelectorAll ，它也不起作用。 我试过创建一个父容器，然后通过父容器定位子元素，就像这样.parent div:nth-child(odd) ，但同样只适用于第一个奇数。 我试过没有jquery ，结果相同，虽然没有 jquery ，如果我必须使用getElementsByClassName ，我不知道如何添加第nth-child(odd) ，因为document.getElementsByClassName("coltest:nth-child(odd)")[0].style.backgroundColor = "red"; 这会产生错误，如果没有[0] ，也会产生错误。

如果我使用 CSS 代替它可以工作，但为什么它不能在 Javascript 中工作？

Answer 1

使用[0]仅对 jQuery 集合的第一个元素进行操作。 如果要处理所有这些，则需要一个循环。

但是由于您使用的是 jQuery，因此请使用其.css()方法，该方法将自动处理集合中的每个元素。

 $("#oddcolor").click(function() { $(".coltest:nth-child(odd)").css('backgroundColor', 'red'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <div class="coltest">test</div> <button id="oddcolor">Click me</button>