Question

我的情况如下：

<div class="milk">
    <span class="onion">1</span>
</div>
<div class="milk">
    <span class="onion">2</span>
</div>
<div class="milk">
    <span class="onion">3</span>
</div>

<div class="stone">
    <span class="onion">1</span>
</div>

<div class="stone">
    <span class="onion">2</span>
</div>

<script>
    var onions = [];
    var milk = [].slice.call( document.querySelectorAll( '.milk' ));
    var stone = [].slice.call( document.querySelectorAll( '.stone' ));

    milk.forEach( function( element, i ) {
        onions.push(element.querySelector( '.onion' ));
    });

    stone.forEach( function( element, i ) {
        onions.push(element.querySelector( '.onion' ));
    });
</script>

如您所见，我使用类似的相同语句来推送.onion和milk元素中的stone元素。这就是我的问题 - 出于好奇，是否有办法将onion个元素用一行或一个语句推入数组onions，而不首先合并两个数组？

假设以下声明有效（事实并非如此），这就是我正在寻找的答案：

(stone, milk).forEach( function( element, i ) {
        onions.push(element.querySelector( '.onion' ));
    });

Answer 1

如果您的问题是如何通过一次调用遍历两个数组，请考虑concat：

milk.concat(stone).forEach( /* callback */ )

或者使用ES6传播语法：

[...milk, ...stone].forEach( /* callback */ )

如果使用forEach的原因是构建新数组（onions），请考虑改为使用map：

onions = milk.concat(stone).map(function (elem) { 
    return elem.querySelector('.onion');
});

但对于您的特定查询，您最好使用querySelectorAll()将逻辑放在CSS选择器中，Ori Drori在删除的答案中提出了这一点：

onions = Array.from(document.querySelectorAll('.milk > .onion, .stone > .onion'));

如何通过一次调用从两个单独的数组中获取具有相同类的元素？

1 个答案: