如何指定在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中只在特定區域執行一個函數？

回答

相關問題