如何指定在jQuery中只在特定区域执行一个函数？

我有这样的jQuery的片段：如何指定在jQuery中只在特定区域执行一个函数？

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

这将打开每个<ul>什么在另一个<ul>里面，但我想使这个只为：

<div id="header"></div>

编辑

这里是结构，我修改了一下，原来我想把它加到我的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的:)

来源

2010-09-30 Adam

好的，您目前的选择器*做了什么*，并且您希望它做什么而不是*？ – 2010-09-30 01:50:24

只要改变

$("ul > li")

要

$("#header ul > li")

这将限制header div内的元素。

来源

2010-09-30 01:50:27 BrunoLM

我试过了，但没有工作：| – Adam 2010-09-30 01:53:00

嗯我加了#navigation到'ul'这就是为什么没有工作，如果我添加到父div然后它的工作。谢谢！我想如果我用'＃navigation'替换'ul'，那么我将如何工作：D – Adam 2010-09-30 01:54:23

假设只有一个ul的#navigation内格：

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

该选择器用于，上方，仅选择li元素是一个UL其本身的后代的直接后代的元素id="navigation"。

你可以，也简单地套用一个id 到的ul，例如id="navList"然后用：

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

编辑以下OP的改变的问题/发布（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/ 
    } 
);

请注意，我的天堂没有测试过你正在尝试应用的功能，我相信你已经有效。

来源

2010-09-30 01:35:32

我应该使用这个吗？片段之前或内部？只是因为'.hover' – Adam 2010-09-30 01:38:30

我建议用上面修改的选择器替换原始的$（'ul> ul'）'，看看有什么作用。我不完全确定，但是您是否因为我原来的回答而编辑了您的问题？我确信，当我第一次阅读它时，选择器是'$（“ul ul”）'？ – 2010-09-30 01:40:38

不，我没有编辑它的内容，只有标题，但在你回答我的问题之前:) – Adam 2010-09-30 01:41:49

大卫是正确的，或添加一个类或ID您<UL>，并直接针对它：$('ul#ul-id').hover(/* .... */);

来源

2010-09-30 01:40:04 lucifurious

耶，这意味着我是正确的*两次*在一个答案=） – 2010-09-30 01:43:15

哈哈我想你改变了它而我正在打字。加上我的代表是在100以下，所以我必须继续努力，直到3分钟了.... bogosity – lucifurious 2010-09-30 02:10:17

是的，我必须承认，我编辑了我的答案，然后看到新的答案，所以... yup =）只有另外七个最新的答案，投票去和枷锁脱落=） – 2010-09-30 03:44:43

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

但在jQuery中知道的一件好事是，您可以为您的jQuery选择器提供a context。通常，jQuery选择器在整个DOM中查找。如果你想缩小这个范围，或者让它看起来在其他地方提供了一个上下文。为了寻找this在context使用形式：

$(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。

来源

2010-09-30 01:59:35

如何指定在jQuery中只在特定区域执行一个函数？

回答

相关问题