jquery在li中选择THIS id

Question

如何以正确的方式使用"THIS"来选择"li"中的ID？

<li class="item">
    <div id="sale_container">text</div>
</li>
$("li.item").hover(function () {
        $("#sale_container").fadeIn(400);
    })
    $("li.item").mouseleave(function () {
        $("#sale_container").fadeOut(400);
    })

它如何影响所有李和类"项目"。所以，当鼠标结束时，我希望它在每一个li内部产生影响。

这个例子不起作用

$("li.item").hover(function () {
    $(this)("#sale_container").fadeIn(400);
})
$("li.item").mouseleave(function () {
    $(this)("#sale_container").fadeOut(400);
})

Answer 1

由于ID是唯一的，您只需要使用$('#sale_container')，而不需要任何其他限定符。

假设你没有使用ID，那么你会使用：

$(this).find(...).fadeIn(400);"…"是您在内部查找内容的选择器，可以是("div")或(".myClassname")等。

Answer 2

替换：

$(this)("#sale_container").fadeIn(400);

带有：

$(this).find("#sale_container").fadeIn(400);

甚至：

$(this).children().fadeIn(400); // will fade any element inside .item

请注意，在一个页面上只能有一个唯一的ID。

Answer 3

您可以使用以下代码：

$("li.item").hover(function () {
    $(this).find("#sale_container").fadeIn(400);
});

Answer 4

使用find函数查找包含在父元素（this）中的元素。

$("li.item").hover(function () {
    $(this).find("#sale_container").fadeIn(400);
})

Answer 5

 $("li.item").hover(function () {
        $("#sale_container",$(this)).fadeIn(400);
    }, function () {
       $("#sale_container",$(this)).fadeOut(400);
    });

FIDDLE演示