javascript - 在 jquery 中访问子 div 时遇到问题

Question

我有多个 div，当用户将鼠标悬停在 div 上时，我试图执行一个功能。在 div 内部可以有任意数量的“子”div，我需要在函数中访问它们。我似乎无法做到这一点。这是我正在尝试做的一个例子:

<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>

对于脚本:

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

尝试使用find()

$(this).find("div").hide();

但是，如果您开始使用 jQuery，则可以使用 jQuery 本身订阅有关文档加载的事件:

$(function() {
    $('div#div_test').hover(function() {
        $(this).find('div').hide();
    }, function() { 
        $(this).find('div').show();
    });
});