CODEWITHSUNDEEP
javascriptjquery
AKor
AKor

Reputation: 8882

Performing a function on selected element, and a different function on all other elements of same class?

I have a set of three <div> elements, of which one is "selected" on page load (giving it a different colored border). I'm trying to have it such that if a different <div> of the same class is clicked, that that particular one receives the new border color while the other two revert to their default grey border.

I have my JS like this:

  $('.container').click(function(){
    $(this).css('border','2px solid #ffffff');
    $(this).siblings().css('border','2px solid #e3e3e3');
  });

I've also tried using .not() with the same result of the code not behaving as expected.

Simplified HTML here:

<div class="container">Some Content</div>
<div class="container">Some Content</div>
<div class="container">Some Content</div>

The first line works, but the second line doesn't give the element's siblings the different border color. I've looked online but no solutions are giving me what I need. Any help?

Upvotes: 0

Views: 36

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65796

This is very simple and doesn't require any particular hierarchy for the elements as long as they are all of the same class.

Just set a default style for that class and add an event handler that resets all the divs to normal but just the one that was clicked to special.

$('.normalDiv').click(function(){
   // First set all div elements back to normal
   $('.normalDiv').removeClass("activeDiv");

   // Then, apply the special class to the clicked div
   $(this).addClass("activeDiv");
});
.normalDiv { background-color:#e0e0e0; width:100px;margin:5px; }
.activeDiv { border:1px solid black; background-color:aliceblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="normalDiv">content</div>
  <div>
    <div class="normalDiv">content</div>
    <div class="normalDiv">content</div>
  </div>
</div>

Upvotes: 2

epascarello
epascarello

Reputation: 207521

From the comments you stated that the elements were not siblings, but the parents were. So in that case you would need to select the parent, than siblings, and reselect the containers.

  $('.container').click(function(){
    $(this)
        .css('border','2px solid #ffffff')
        .parent()
           .siblings()
             .find(".container")
               .css('border','2px solid #e3e3e3');
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div class="container">Some Content</div></div>
<div><div class="container">Some Content</div></div>
<div><div class="container">Some Content</div></div>

In the end that is really strange to do... Other way is to just select the elements, and set a class on the one that is active. 

var containers = $('.container');
containers.click(function(){
  containers.removeClass("active");
  $(this).addClass("active");
  // If you want to toggle on and off the one that is selected
  // containers.not(this).removeClass("active");
  // $(this).toggleClass("active");

});
.container { border: 2px solid #e3e3e3;}
.container.active {  border-color: #ffffff; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div class="container">Some Content</div></div>
<div><div class="container">Some Content</div></div>
<div><div class="container">Some Content</div></div>

Upvotes: 1

Related Questions