javascript - 获取单击元素的同级并在没有指令的情况下删除纯JavaScript或angular js

所以问题是我知道如何在jQuery中做到这一点，而且我知道jQuery是开放平台，因此我可以找到siblings（）的实际作用。
但我想用纯js或angular来做，但没有指令。
纯JS中的首选解决方案。
因此，当单击div时，addClass被兄弟姐妹删除了相同的类。

提前致谢。

这是html

<div class="container">
  <div class="row">
    <div id="1">
      <h1>asfsaff</h1>
    </div>
    <div id="2">
      <h1>asfsaff</h1>
    </div>
    <div id="3">
      <h1>asfsaff</h1>
    </div>
    <div id="4">
      <h1>asfsaff</h1>
    </div>
    <div id="5">
      <h1>asfsaff</h1>
    </div>
    <div id="6">
      <h1>asfsaff</h1>
    </div>
  </div>
</div>

这是我的js

$scope.addParent = function(e) {
    var men  = event.target.getAttribute('data');
    console.log(men);
    var divSlide = document.querySelectorAll('div');
        divSlide.forEach(function(getId){
            var divId = getId.getAttribute('id');

                if(men === divId) {
                    getId.className = "fsafsa";
                    }

        });
}

最佳答案

这是可能的应用方式。找到所需的节点，然后调用getSiblings并检索同级节点的集合，然后遍历它们并对其进行所需的操作：

var mySel = document.getElementById("2");
var myOthers = getSiblings(mySel);

// First, let's set the style of our selection
mySel.className = "selected"

// Next, let's de-toggle any others
for (var i=0; i<myOthers.length; i++){
  myOthers[i].className = "not-selected";
}



// utility functions
function getChildren(n, skipMe){
    var r = [];
    for ( ; n; n = n.nextSibling )
       if ( n.nodeType == 1 && n != skipMe)
          r.push( n );
    return r;
};

function getSiblings(n) {
    return getChildren(n.parentNode.firstChild, n);
}

.row div {
  padding: 5px;
}
.selected {
  border: 1px dotted blue;
}
.not-selected {
   border: 1px solid red;
}

<div class="container">
  <div class="row">
    <div id="1">
      <h1>asfsaff</h1>
    </div>
    <div id="2">
      <h1>asfsaff</h1>
    </div>
    <div id="3">
      <h1>asfsaff</h1>
    </div>
    <div id="4">
      <h1>asfsaff</h1>
    </div>
    <div id="5">
      <h1>asfsaff</h1>
    </div>
    <div id="6">
      <h1>asfsaff</h1>
    </div>
  </div>
</div>

看了我在注释中提到的示例，这是相关的代码段。一个非常优雅的纯JavaScript解决方案：

function getChildren(n, skipMe){
    var r = [];
    for ( ; n; n = n.nextSibling )
       if ( n.nodeType == 1 && n != skipMe)
          r.push( n );
    return r;
};

function getSiblings(n) {
    return getChildren(n.parentNode.firstChild, n);
}

因此，getSiblings为当前节点的父节点调用getChildren，然后从返回列表中简单地删除当前节点。我喜欢！

关于javascript - 获取单击元素的同级并在没有指令的情况下删除纯JavaScript或angular js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41882775/