Question

if(document.readyState === 'complete') {
    function $(elements) {
        var matches = document.querySelectorAll(elements);
        for (var i = 0; i < matches.length; i++) {
             var item = matches[i];   
        }
        return item;
    }
}

$('div.test').style.fontSize = '36px';

<div class="test">asdf</div>
<div class="asdfd">test</div>
<div class="test">test</div>

我想使用querySelectorAll选择所有元素，但这似乎只影响最后一个元素。

Answer 1

您正在循环中分配变量，该变量仅返回最后一个变量。您应该通过在循环外声明变量或返回匹配来构建匹配数组：

function $(elements) {
  return document.querySelectorAll(elements);
}

或者：

function $(elements) {
  var matches = document.querySelectorAll(elements);
  var items = [];
  for (var i = 0; i < matches.length; i++) {
    items.push(matches[i]);   
  }
  return items;
}

Answer 2

您依次将每个项目分配到var item。

在您分配了最后一个之后，您将返回当前值item（这是最后一个）。

返回matches然后循环，依次设置每个项目的字体大小。

Answer 3

让我们来看看你的$功能正在做什么。

选择与查询匹配的所有项目
将列表中的第一项指定给item ...
将第n项分配给item
返回现在包含最后一个元素的item

因此$()仅返回最后一个元素，并且在该对象上，您正在执行作业.style.fontSize = '36px'

没有简单的方法来实现$来完成你想要做的事情。您可以尝试这样调用的函数：

$(selector, {
    fontSize : "36px"
});

它看起来像这样：

function $(selector, properties) {
    var matches = document.querySelectorAll(selector);
    for (var i = 0; i < matches.length; i++) {
        for (var j in properties) {
            matches[i].style[j] = properties[j];
        }
    }
}

我建议你在继续之前完全理解这是做什么的。

此外，您使用document.readyState的方式使它变得多余。您应该将函数调用括在document.readyState中，而不是定义。

Answer 4

变量项不是数组，然后在每个迭代循环中被覆盖。或者通过保存所有选择器按顺序定义数组，或者在for循环中添加返回值。

Answer 5

当然！变量item保存当前的迭代匹配。 for周期完成后，它将自然保留最后一个匹配的元素。 Javascript按顺序执行，这意味着return语句将在for周期后执行。

Answer 6

我看到你正在尝试使用链接。这不适用于您当前的结构，因为您的选择器函数将只返回querySlectorAll中最后一个匹配的元素。

我认为在这种情况下，最好将要执行的函数传递给每个元素，或者返回一个数组/节点列表以供另一个函数使用;

function $(elements, method) {
    var matches = document.querySelectorAll(elements);
    for (var i = 0; i < matches.length; i++) {
         method(matches[i]);   
    }
}

$('div.test', function (elem) {elem.style.fontSize = '36px';});

Answer 7

if(document.readyState === 'complete') {
    function $(elements) {
        var matches = document.querySelectorAll(elements);
        for (var i = 0; i < matches.length; i++) {
             var item = matches[i];   
        }
        return item;
    }
}

$('div.test').style.fontSize = '36px';

<div class="test">asdf</div>
<div class="asdfd">test</div>
<div class="test">test</div>

querySelectorAll不选择所有元素

7 个答案: