纯Javascript如何选择所有选择器但不是这个

Question

如何使用纯JavaScript来选择所有.dummy类但不是THIS？我搜索了一会儿但找不到我想要的答案.

例如,如果我单击第一个.dummydiv,我想选择所有.dummydiv但不是我点击的那个div.

jQuery的实现方式如下,

var $dummy = $('.dummy');
$dummy.on('click', function(){
    $dummy.not(this).......
});

但我想知道如何通过使用纯JavaScript来实现它

document.querySelectorAll('.dummy').forEach(function(e, i){
  e.addEventListener('click', function(){
    console.log(document.querySelectorAll('.dummy').not(this)); 
    // WRONG not working, also querySelectorAll('.dummy:not(this)'));
  });
});

<div class="dummy">One</div>
<div class="dummy">Two</div>
<div class="dummy">Three</div>
<div class="dummy">Four</div>

Answer 1

您可以使用内置Array.prototype.filter()函数简单地过滤元素数组,以找到您要查找的内容; 但是,document.querySelectorAll返回节点列表对象,而不是数组.

将节点列表转换为数组

棘手的部分是,您首先需要将Node List对象转换为数组,然后才能对其进行过滤.

这可以通过两种方式完成:

1. ES6方式(Spread Operator).

   [...document.querySelectorAll('.dummy')]; .

2. pre-ES6方式(Array.prototype.slice)

   Array.prototype.slice.call(document.querySelectorAll('.dummy')); .

过滤结果

您已经e存储了对每个虚拟元素的引用,这些元素可以在事件侦听器中用于过滤匹配元素.

elements.filter(function(element) {
  return element !== e;
});

完整解决方案

document.querySelectorAll('.dummy').forEach(function(e, i){
  e.addEventListener('click', function(){
    var elements = [...document.querySelectorAll('.dummy')];

    var otherElements = elements.filter(function(element) {
      return element !== e;
    });
    
    console.log(otherElements);
  });
});

<div class="dummy">One</div>
<div class="dummy">Two</div>
<div class="dummy">Three</div>
<div class="dummy">Four</div>