querySelectorAll不适用于指定的元素

时间:2016-05-15 00:28:04

标签: javascript selectors-api

我正在努力实现选择我想要使用循环querySelectorAll的所有指定元素,但我仍然失败。始终只选择第一个元素。这是我的代码:

HTML:

<div id="text">Text 1</div>
<div id="text">Text 2</div>
<div id="text">Text 3</div>


JS:

function query(selector) {
    var elem = document.querySelectorAll(selector);

    if(elem.length) {
        for(var i = 0; i < elem.length; i++) {
            return elem[i];
        }
    }
}

query("#text").style.background = "red";


我做错了什么?

3 个答案:

答案 0 :(得分:3)

return语句终止函数执行,即不执行后续代码。你的函数在循环的第一次迭代中返回第一个选中的元素,那就是它的结束。

在这种情况下,无需迭代集合。如果要获取所有选定的元素,可以返回querySelectorAll方法的返回值,但是由于返回的集合没有这样的属性,所以不能使用style属性。 。

function query(selector) {
    // convert the NodeList into a regular array
    // https://developer.mozilla.org/en-US/docs/Web/API/NodeList
    return Array.prototype.slice.call(document.querySelectorAll(selector));
}

// since `query` returns an array you can use it's `forEach` method 
// for iterating over the array
query(".text").forEach(function(el) {
   el.style.backgroundColor = "red";
});

请注意,ID必须是唯一的。你应该使用类。

答案 1 :(得分:2)

问题出在return语句中,该语句只返回第一个元素,然后将链应用于它。之后它就完成了,不再处理任何元素。

您可以使用此hack并拥有一个真正的通用应用程序

function query(selector, callback) {
  [].forEach.call(document.querySelectorAll(selector), callback)
}

这就是如何使用它。

query('#option', function(el){el.style.backgroundColor = "red"})
// or ES6
query('#option', el => el.style.backgroundColor = "blue")

一次应用多项更改:

query('#option', el => {
  el.style.backgroundColor = "green"
  el.style.color = 'cyan'
  el.style.textDecoration = 'line-through'
})


模仿链接,如果您因任何原因想要讨厌......

function query(selector, callback) {
  [].forEach.call(document.querySelectorAll(selector), callback) 

  return arguments.callee.bind(undefined, selector)
}

用法:

query('#option', el => el.style.backgroundColor = 'red')(el => el.style.color = 'black')(el => el.style.textDecoration = 'underline')

答案 2 :(得分:1)

使用class代替id - Ids必须是唯一的,但可以根据需要将类分配给任意数量的元素,也可以为每个元素分配尽可能多的类,

<div class="mytext">Text 1</div>
<div class="mytext">Text 2</div>
<div class="mytext">Text 3</div>

我建议你使用Jquery,所以你可以将背景颜色作为

$(".mytext").css({background:"red"});