Question

I have multiple divs and I’m attempting to do a function when a user mouses over the divs. Inside of the divs there can be any number of “child” divs and I need to access them within the function. I don’t seem to be able to do this. Here is an example of what I’m trying to do:

<div id='div_test'  onmouseover='modelMouseOver2()' onmouseout='modelMouseOut()'>

        <div id = "model1"><img src="img/circle.png" alt="" /></div>
        <div id = "model2" class='models' onmouseover="modelMouseOver2()" onmouseout="model2MouseOut()" style=" width: 40px; height: 40px;"><img src="img/circle2.png" alt=""  />
            <div><img src="img/circle3.png" alt="" /></div>
            <div><img src="img/circle4.png" alt="" /></div>
            <div><img src="img/circle2.png" alt="" /></div>
        </div>
        <div id = "model3" class='models' onmouseover="modelMouseOver2()"><img src="img/circle3.png" alt=""  /></div>
        <div id = "model4" class='models' onmouseover="modelMouseOver2()"><img src="img/circle4.png" alt="" /></div>
        <div id = "model5" class='models' onmouseover="modelMouseOver2()"><img src="img/circle5.png" alt="" /></div>

    </div>

for The script:

function modelMouseOver2() {
// I'm not sure what to do here to access the child divs.
$(this).children("div").each(function (i) {
    $(this).hide();
});
}

Answer 1

The problem is that in:

function modelMouseOver2() {
// I'm not sure what to do here to access the child divs.
$(this).children("div").each(function (i) { // here
    $(this).hide();
});
}

The first “this” refers to the DOM window.

You have two options here. The first is to pass in this in the inline event, the second being just to set the event in javascript:

Inline:

<div id='div_test'  onmouseover='modelMouseOver2(this)' onmouseout='modelMouseOut()'>

and the javascript for inline:

function modelMouseOver2(xthis) {
// I'm not sure what to do here to access the child divs.
$(xthis).children("div").each(function (i) {
    $(this).hide();
});
}

Or, setting the onmouseover via javascript:

document.getElementById('div_test').onmouseover=modelMouseOver2;