CODEWITHSUNDEEP
javascriptjqueryhtml
jas7457
jas7457

Reputation: 1991

How to set jQuery mouseleave function for multiple divs with same id

I have a site that has multiple divs with the same id name. I want to set a mouseleave function for all of the divs that have this id. In my $(document).ready function I have this code...

$('#my_post_container').mouseleave(function(e)
{
    hideSnippet();
});

My hideSnippet() function is correct, but doing this only set the mouseleave function for the first time that a div comes up of id my_post_container. Is there a way to set the mouseleave function to all divs with this id?

Upvotes: 0

Views: 457

Answers (4)

sam
sam

Reputation: 2345

First of all there should not be any div elements with same ID name.. first we should solve that by keeping class name same.

then on mouse leave and enter part..

 $(".testClass").on({
  mouseenter : function() {
          $(this).css({"background-color" : "blue"});
  },
  mouseleave : function() {
          $(this).css({"background-color" : "green"});
  }
 });

this should work.. will add a js sample http://jsfiddle.net/meVc6/

and the same thing can be achived using css too..

just add css .testClass:hover { background-color:blue}

Upvotes: 0

jfriend00
jfriend00

Reputation: 707486

It is invalid HTML to have multiple objects with the same id. As such, you cannot use normal selectors to find them all and you should fix your HTML to not do that.

The #1 suggestion is to fix the HTML so it does not have multiple objects with the same ID. Use a class name and you can then select them all with getElementsByClassName() or querySelectorAll() or with jQuery selectors as in:

$('.my_post_container')

If you insist on having multiple objects with the same id (a bad choice), then you will have to somewhat manually iterate over all possible objects that could have that id.

$("div[id='my_post_container']");

But, this is pretty darn inefficient because the browser can't use any of the built-in selector engine logic and it could break in the future if jQuery decides to optimize this. You really ought to switch to using class names.

Upvotes: 2

adamdehaven
adamdehaven

Reputation: 5920

You can not have multiple elements on the same page with the same id. Use a class instead, as shown here:

HTML:

<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>

jQuery:

$('.my_post_container').mouseleave(function(e)
{
    hideSnippet();
});

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074535

I have a site that has multiple divs with the same id name.

Then you need to fix that. You must not have more than one element with the same id. id values must be unique on the page.

You probably want to use class instead, at which point your code is basically fine:

$('.my_post_container').mouseleave(function(e)
{
    hideSnippet();
});

...although it coudl be shortened a bit if hideSnippet doesn't care what arguments it gets, doesn't care about this, and doesn't return false:

$('.my_post_container').mouseleave(hideSnippet);

Upvotes: 2

Related Questions