CODEWITHSUNDEEP
jqueryhtml
abhjt
abhjt

Reputation: 442

Need to add class 'select1' on click event with these ids

$('#select').click(function() {
  if ($('div').attr('id') == '1') {
    $('#1').addClass("select1");
  } else if ($('div').attr('id') == '2') {
    $('#2').addClass("select1");
  } else if ($('div').attr('id') == '3') {
    $('#3').addClass("select1");
  }
})
.select1 {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
  <div id="1">
    //some code
  </div>
  <div id="2">
    //some code
  </div>
  <div id="3">
    //some code
  </div>
</div>

What's wrong in this code? I need to add class 'select1' on click event with different ids satisfying the conditions above.

Upvotes: 3

Views: 82

Answers (7)

Ganesh Putta
Ganesh Putta

Reputation: 2681

just for your reference i added background color to that class and you can do more customization as per your requirement

$('#select div').click(function(e) {
  $('#select div').removeClass("select1");
  $(e.target).parent().addClass("select1");
})
.select1{
  background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
            <div id ="1">
             <a>First Div</a>
            </div>
              <div id ="2">
               <a>Second Div</a>
            </div>
              <div id ="3">
                <a>Third Div</a>
          </div>
    </div>

Upvotes: 0

codingsplash
codingsplash

Reputation: 5075

You want to add a class to the div that was clicked. For that use this as shown below:

if ( $(this).attr('id') == '1' )  {
$('#1')removeClass("select1")
$('#1').addClass("select1");
}

Upvotes: 0

Advaith
Advaith

Reputation: 2590

//function to remove the previous ones
function remove() {
  $('#first a').removeClass("select1");
  $('#second a').removeClass("select1");
  $('#third a').removeClass("select1");
}

//function to add class
$('#select').click(function(e) {
  remove();
  $(e.target).addClass("select1");
})
.select1{
  background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
            <div id ="first">
             <a>First Div</a>
            </div>
              <div id ="second">
               <a>Second Div</a>
            </div>
              <div id ="third">
                <a>Third Div</a>
          </div>
    </div>

Upvotes: 0

vijayP
vijayP

Reputation: 11512

You can do it in following way:

$(document).ready(function(){
  
  $('#select > div').click(function(){
      $('#select > div').removeClass("select1"); //remove select1 from previously added div
      $(this).addClass("select1"); // add select1 to currently clicked div
    });
  });


          
.select1{
  background: red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="select">
  <div id="1">
    //some code 1
  </div>
  <div id="2">
    //some code 2
  </div>
  <div id="3">
    //some code 3
  </div>
</div>

Upvotes: 2

Satpal
Satpal

Reputation: 133433

Problem with implementation is that $('div').attr('id') it will always return you the ID of first div it encounters while DOM traversal thus its returned value is select. So the no condition is fulfilled.

You can use Event.target it returns a reference to the object that dispatched the event. then $() can be used to construct a jQuery object to use various jQuery methods.

$('#select').click(function(event) {
  //Remove previously added class
  $('#select > div.select1').removeClass("select1");

  //Add class to current element
  $(event.target).addClass("select1");
})


$('#select').click(function(event) {
  //Remove previously added class
  $('#select > div.select1').removeClass("select1");
  $(event.target).addClass("select1");
})
.select1 {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
  <div id="1">
    //some code
  </div>
  <div id="2">
    //some code
  </div>
  <div id="3">
    //some code
  </div>
</div>

Upvotes: 0

Rahul
Rahul

Reputation: 2474

Use each to loop through the divs as : 

$('#select').click(function(){
alert('jk');
$('div').each(function(){
alert('l');
if ( $(this).attr('id') == '1' )  {
            $(this).addClass("select1");
          }
})
})

working fiddle :

https://jsfiddle.net/u9p0z41e/1/

Upvotes: 0

4b0
4b0

Reputation: 22323

Loop to find child div inside main div.

   $('#select').click(function(){
    $('div#select > div').each(function(){ 
              if ( $('div').attr('id') == '1' )  {
                $('#1').addClass("select1");
              }
              else if ( $('div').attr('id') == '2' )  {
                $('#2').addClass("select1");
              }
              else if ( $('div').attr('id') == '3' )  {
                $('#3').addClass("select1");
              }
             });
    });

Upvotes: 0

Related Questions