CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sam Chahine
Sam Chahine

Reputation: 620

jQuery action on each single element with multiple instances

Say I have 5 divs, all having the same styling:

Fiddle

HTML

<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>

CSS

#box {
    background-color:blue;
    width:200px;
    height:50px;
    display:block;
    margin-top:10px;
}

I want to execute some jQuery in order to change the colour of every specific div on .mouseover(), and change it back to the original on .mouseout():

jQuery

$(document).ready(function() {
   $('#box').mouseover(function() {
      $('#box').css('background-color', 'red'); 
   });

    $('#box').mouseout(function() {
      $('#box').css('background-color', 'blue'); 
   });
});

This only works for the first instance of the div, how would I go about making this work for every individual one? I want each div to work as it's own but I have no idea how to do that.

I researched and found out about .each() but I'm clueless as to how to incorporate that into my function. Can someone please help me out? Thank you in advance.

Upvotes: 0

Views: 155

Answers (3)

Renato Fialho
Renato Fialho

Reputation: 11

You can't look for objects with same id, instead, you can use .each jquery function to look out for each div with id #box.

It looks like in this fiddle.

Fiddle

$(document).ready(function() {
$( "div#box" ).each(function() {
  $( this ).mouseover(function(index) {
      console.log( index + ": " + $( this ).text() );
      $(this).css('background-color', 'red'); 
   });

   $( this ).mouseout(function(index) {
       console.log( index + ": " + $( this ).text() );
      $(this).css('background-color', 'blue'); 
   });
});
});

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

As people said ID must be always unique and along with that if you want to achieve it jquery way, then you can do it as below:

$(document).ready(function() {
  //bind class element with '.' prefixed
  $('.box').mouseover(function() {
    $(this).css('background-color', 'red');
    //$(this) refers to current element here
  });

  $('.box').mouseout(function() {
    $(this).css('background-color', 'blue');
  });
});
.box {
  background-color: blue;
  width: 200px;
  height: 50px;
  display: block;
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

UPDATE

Using hover and with some performance improving aspect you can try to achieve it as below:

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).css('background-color', 'red');
  },function(){
      $(this).css('background-color', 'blue');
  });
});

Upvotes: 3

Tushar
Tushar

Reputation: 87203

ID must be Unique.

You can use the same class to all the elements. There is no need of using Javascript when you can use :hover in CSS to change the style of element on hover.

Updated Fiddle

.box {
  background-color: blue;
  width: 200px;
  height: 50px;
  display: block;
  margin-top: 10px;
}
.box:hover {
  background: red;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Upvotes: 5

Related Questions