0

So the problem is i know how to do it in jQuery, and i know jQuery is open platform so I could find what siblings() actually do. But i want to do it in pure js or angular but without directive. Preferable solution in pure JS. So when div is clicked addClass, but siblings remove that same class.

Thanks in advance.

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

Here is my 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";
                    }

        });
}
Anders Vestergaard
  • 1,139
  • 1
  • 14
  • 21
NemanjaD
  • 258
  • 1
  • 14
  • Take a look at http://stackoverflow.com/questions/842336/is-there-a-way-to-select-sibling-nodes -- goes through how jQuery actually does it via pure javascript. Very elegant, actually. using parentNodes and childNodes. – Snowmonkey Jan 26 '17 at 21:00
  • For removing the class you can do something like `sibling.className = (" " + sibling.className + " ").replace(" " + classToRemove + " ", " ").trim()`. – Marie Jan 26 '17 at 21:10
  • @Marie, you're absolutely right -- in my answer, I did a destructive className thing. Bad form, me. – Snowmonkey Jan 26 '17 at 21:23
  • 1
    this is actually quite trivial to accomplish using `ng-class`. Would you care to see a demonstration of this? – Claies Jan 26 '17 at 21:35
  • @Claies Yes Sure Tnx . – NemanjaD Jan 26 '17 at 21:37
  • I'll post a plunker shortly. – Claies Jan 26 '17 at 21:37
  • I posted a plunker showing using an `ng-repeat` along with `ng-class`. If you want more info, I can provide a more complete answer. http://plnkr.co/edit/dE1GU0mFA6D548zQCxeJ?p=preview – Claies Jan 26 '17 at 21:49
  • @Claies, Tnx so much, you're awesome. – NemanjaD Jan 26 '17 at 21:59

1 Answers1

1

Here's how it might be applied. Find the node you want, then call getSiblings and retrieve a collection of sibling nodes, then iterate over them and do whatever you'd like to them:

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>

Looked at the example I mention in the comments, here's the relevant piece of code. A very elegant pure-javascript solution:

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

So getSiblings calls getChildren for the current nodes parent, then simply removes the current node from the returned list. I like it!

Snowmonkey
  • 3,716
  • 1
  • 16
  • 16
  • yes sure but how to adjust on my example and do i need to change content of html to r, beacuse it forms new array? – NemanjaD Jan 26 '17 at 21:22
  • r is internal to the utility function. All you do is call getSiblings, as I did in the example, then iterate over them as an array of HTML elements. – Snowmonkey Jan 26 '17 at 21:24
  • Where you have the line divSlide = querySelector("div"), you would simply do divSlide = getSiblings(event.target) which would return everything BUT the selected element. – Snowmonkey Jan 26 '17 at 21:26
  • no problem but can you please change your example according to my code. – NemanjaD Jan 26 '17 at 21:45
  • No need finally figured out . Tnx – NemanjaD Jan 26 '17 at 21:59