jquery - jquery在li里面选择这个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 内生效，当鼠标悬停时。

这个例子不起作用

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

Answer 1

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

小提琴演示

Answer 2

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

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

Answer 3

由于 ID 是唯一的，因此您只需要在$('#sale_container')没有任何其他限定符的情况下使用。

假设您没有使用 ID，那么您将使用：

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

Answer 4

代替：

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

和：

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

甚至：

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

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

Answer 5

您可以使用以下代码：

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