73

document.querySelectorAll でクエリを実行した選択した要素をループしようとしていますが、どうすればよいですか?

たとえば、私は使用します：

var checkboxes = document.querySelectorAll('.check');
for( i in checkboxes) {
  console.log(checkboxes[i]);
}

出力：

<input id="check-1" class="check" type="checkbox" name="check">
<input id="check-2" class="check" type="checkbox" name="check">
<input id="check-3" class="check" type="checkbox" name="check">
<input id="check-4" class="check" type="checkbox" name="check">
<input id="check-5" class="check" type="checkbox" name="check">
<input id="check-6" class="check" type="checkbox" name="check">
<input id="check-7" class="check" type="checkbox" name="check">
<input id="check-8" class="check" type="checkbox" name="check">
<input id="check-9" class="check" type="checkbox" name="check">
<input id="check-10" class="check" type="checkbox" name="check" checked="">

10
item()
namedItem()

私の問題は、最後にこのメソッドが 3 つの余分なアイテムを返すことです。どうすれば適切に行うことができますか？

4

8 に答える 8

50

for inloop は、配列や配列のようなオブジェクトにはお勧めできません。理由はわかります。lengthプロパティやいくつかのメソッドなど、番号インデックス付きのアイテムだけでなくfor in、それらすべてをループすることもできます。どちらかを使用

for (var i = 0, len = checkboxes.length; i < len; i++) {
    //work with checkboxes[i]
}

また

for (var i = 0, element; element = checkboxes[i]; i++) {
    //work with element
}

2番目の方法は、配列内の一部の要素が偽である可能性がある場合（あなたの場合ではない）は使用できませんが、[]どこでも表記法を使用する必要がないため、より読みやすくなります。

于 2012-09-08T12:04:00.043 に答える
31

Firefox 50 以降、Chrome 51 以降、Safari 10 以降はすべてオブジェクトの.forEach機能をサポートしているようです。NodeList注 - <strong>.forEachは Internet Explorer ではサポートされていないため、上記の方法のいずれかを検討するか、IE のサポートが必要な場合はポリフィルを使用してください。

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => console.log(p));
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>

于 2017-02-27T19:26:53.130 に答える
26

ES6では、非静的メソッド (マップ、フィルターなど)Array.fromを利用するための静的メソッドがあります。Array

Array.from(document.querySelectorAll('div')).forEach((element,index) =>
{

     // handle "element"

});

Array.fromsince querySelectorprovidesメソッドの別の使用item法:

var all = document.querySelectorAll('div');
// create range [0,1,2,....,all.length-1]
Array.from({length: all.length}, (v, k) => k).forEach((index) => {
     let element = all.item(index);
});
于 2016-09-07T18:31:37.200 に答える
25

良い代替手段は次のとおりです。

[].forEach.call(
    document.querySelectorAll('.check'),
    function (el) {
        console.log(el);
    }
);

ただし、指摘したように、for ループを使用する必要があります。

于 2013-12-24T11:11:49.077 に答える