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类“item”。因此，当鼠标结束时，我想让它在每个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 Demo

jquery在li里面选择这个id

5 个答案: