Javascript:parent in jquery

Question

onmouseover="javascript:parent.DivColorHover(this)"

i have a div in which values are created dynamically, i use this div as popup so that it will be used as dropdown list elements. onMouseOver of each value i am changing background color using the above line of code in javascript. how do i achieve the same in jquery

Answer 1

Let's first look at the code that you are using.

The javascript: protocol is out of place (it's used when code is placed in an URL) so it just becomes an unused label.

The parent object is a reference to the page that contains the iframe that the current page is in. As you are probably not in an iframe but a regular page, it will just be a reference to the current page.

So, all that is left of the code is actually:

onmouseover="DivColorHover(this)"

To add the same event using jQuery you need some way to identify the element, for example by adding an id="something", then you can do this:

$(function(){
  $('#something').mouseover(function(){
    DivColorHover(this);
  });
});

Answer 2

jQuery(document).ready(function(){
       $("#yourid").mouseover(function() {
              $("#yourid").parent().css("backgroundColour":"red");
       }
}

When html loaded jquery binds the defined function to the mouseover event of element with id="yourid".

This way you keep behaviour (event handlers) and structure (html) separate, easier to understand (for me at least).