在 jQuery 中，如何指定仅在特定区域执行某个功能？

Question

我有这个 jQuery 片段：

$(function() {
        $("ul > li").hover(function() {
          $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
        });
    });

这将打开另一个

中的每个
内容，但我只想将此用于 :

EDIT

这是结构，我修改了一下，本来我想将它添加到我的header id 但我认为这样更好：

<ul id="navigation">
    <li>List item 1 
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
        </ul>
    </li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

如果问题很愚蠢，请不要吃我，我真的是 jQuery 的新手:)

Answer 1

假设 #navigation div 中只有一个 ul：

$('#navigation ul > li').hover( /* rest of jQuery function */ );

上面使用的选择器仅选择作为 ul 直接后代的 li 元素它本身就是 id="navigation" 元素的后代。

您还可以简单地将 id 应用于 ul，例如 id="navList"，然后使用：

$('#navList > li').hover( /* rest of jQuery function */ );

---

Edited following OP's changed question/posted (x)html.

给出以下标记：

<ul id="navigation">
    <li>List item 1 
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
        </ul>
    </li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

并假设他希望用户将鼠标悬停在 li 元素上以显示 li 的子 ul：

$('#navigation > li').hover(
// selects any li that's a direct descendant of the ul with id="navigation"
    function() {
        $('ul', this).stop(true,true).animate({opacity:'toggle'},fast);
        // looks for 'ul' elements inside the currently-selected 'this' object.
        // have a look at the jQuery api for more information on this approach: http://api.jquery.com/jQuery/
    }
);

请注意我还没有测试您尝试应用的功能，我相信您已经可以使用它了。

Answer 2

只需更改

$("ul > li")

为

$("#header ul > li")

即可限制 header div 内的元素。

Answer 3

David 是正确的，或者将类或 ID 添加到您的

中并直接定位它：$('ul#ul-id').hover( /* .... */ );

Answer 4

BrunoLM 提供了一个很好的答案，只需将 jQuery 选择器更改为 #header ul >李。 jQuery 理解 CSS。

但在 jQuery 中需要了解的一件好事是，您可以提供上下文 用于您的 jQuery 选择器。通常 jQuery 选择器会查找整个 DOM。如果您想缩小范围或让它在其他地方查找，请提供上下文。要在 context 中查找 this，请使用以下形式：

$(this, context)

在您的具体情况下，这将是：

$(function() {
    $("ul > li", "#header").hover(function() {
        $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
    });
});

现在，上下文通过内部应用 .find()，所以上面的意思是：

$(function() {
    $("#header").find("ul > li").hover(function() {
        $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
    });
});

上面的两个方法是如果您无法应用 CSS 来解决问题，这非常有用...假设您正在动态创建一个 DOM 元素，并且您想在该元素中使用 jQuery。