Question

例如，给定此HTML：

<div>
    <p>p0</p>
    <p>p1</p>
    <p>p2</p>
</div>

我不明白如何编写一个连接的jQuery this选择器，就像这样：

$("div").on("mouseover", function () {
    $(this + " p").css({
        color: "#009"
    });
});

这个的正确语法是什么？

Answer 1

要在另一个元素中查找元素，请使用上下文选择器。试试这个：

$("p", this).css({ /* ... */ });

或者你可以连接父母的id - 虽然这是一个有点难看的IMO：

$("#" + this.id + " p").css({ /* ... */ });

或者您可以在父元素上使用find()：

$(this).find("p").css({ /* ... */ });

上述任何一个都适合你，虽然第二个例子非常难看，应该避免。请尽可能直接使用this参考。

Answer 2

jQuery选择器采用可选的第二个参数，称为“选择器上下文”。来自jQuery docs：

默认情况下，选择器在DOM中从文档根开始执行搜索。但是，通过使用$()函数的可选第二个参数，可以为搜索提供备用上下文...在内部，选择器上下文使用.find()方法实现，因此$('span', this)是相当于$(this).find('span')。

答案：您需要$("p", this)或等同（但更详细），$(this).find("p")代替$(this+" p")。<p>。这会将您的选择范围限制为this，它们是{{1}}中包含的元素的后代元素。

Answer 3

我认为您正在寻找$('p', this)，它基本上会返回p上下文中的所有this代码。