Question

所以问题是我知道如何在jQuery中做到这一点，我知道jQuery是开放平台所以我可以找到siblings（）实际上做的事情。但我想用纯粹的js或角度但没有指令来做。纯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";
                    }

        });
}

Answer 1

以下是如何应用的。找到你想要的节点，然后调用getSiblings并检索一个兄弟节点的集合，然后迭代它们并做任何你喜欢的事情：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

看看我在评论中提到的例子，这里是相关的一段代码。一个非常优雅的纯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为当前节点parent调用getChildren，然后只从返回的列表中删除当前节点。我喜欢它！

得到点击元素的兄弟和removeClass纯javascript或角js没有指令

1 个答案: