Jquery child elements

Question

When I add event handler to a some elements using query:

$('div').mouseover(function () {

                                    });

Iinside function I have an element for which we add event function ($(this)). how can I check inside this function next:

1. Have this "DIV"($(this)) child elements "DIV"?
2. Have this "DIV"($(this)) child element "DIV" whith height more than 300?

Answer 1

When you are inside the function, this refers to the DIV element. You can then do anything you wish to learn more about it.

So, to get the child DIVs, you can use var childDivs = $('div',this);.

Answer 2

$('div').mouseover(function () {
   var children = $(this).children("div"); //for immediate child div
   if(children.length > 0){
     alert("'div' child present");  
     for(i=0; i < children.length; i++){
        if(children[i].height() > 300) 
           alert("'div' with height more than 300 present");
   } 

});

---

Update: children[i].css('height') can also be used.

Answer 3

You can drop this inside your mouseover event code:

$(this).children('div').each( function() { // $(this) is your parent <div>
  if ($(this).height() > 300) { // $(this) is the current child <div>
    // Do things here...
  }
});