クリックした要素の兄弟を取得し、指示なしで純粋なjavascriptまたは角度jを取り除く

Question

問題は、jQueryでそれを行う方法を知っていて、jQueryがオープンプラットフォームであることを知っているので、兄弟（）が実際に何を見つけることができるかです。 しかし、私は純粋な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を呼び出し、ノードを兄弟のコレクションを取得し、それらを反復して行うものは何でも、あなたは彼らに希望：

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メソッドを呼び出します。私はそれが好きです！