jQuery選擇：如何選擇只是這個元素的兒童

Question

所以，我的代碼看起來像這樣：

<span class="comic_menu mid_menu_title">  
      <ul> 
      <li class="level-0 page_item page-item-264"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=264" title="Ca$h Rulez">Ca$h Rulez</a> 
<ul class='children'> 
    <li class="level-1 page_item page-item-266"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=266" title="1994">1994</a></li> 

    <li class="level-1 page_item page-item-268"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=268" title="1995">1995</a></li> 
    <li class="level-1 page_item page-item-270"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=270" title="1996">1996</a></li> 
    <li class="level-1 page_item page-item-272"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=272" title="1997">1997</a></li> 
    <li class="level-1 page_item page-item-274"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=274" title="1998">1998</a></li> 
    <li class="level-1 page_item page-item-276"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=276" title="1999">1999</a></li> 
    <li class="level-1 page_item page-item-278"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=278" title="2000">2000</a></li> 

    <li class="level-1 page_item page-item-280"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=280" title="2001">2001</a></li> 
</ul> 
</li> 
<li class="level-0 page_item page-item-101"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=101" title="Furlough">Furlough</a> 
<ul class='children'> 
    <li class="level-1 page_item page-item-103"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=103" title="page 66">page 66</a></li> 
    <li class="level-1 page_item page-item-105"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=105" title="page 67">page 67</a></li> 
    <li class="level-1 page_item page-item-107"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=107" title="page 68">page 68</a></li> 

    <li class="level-1 page_item page-item-109"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=109" title="page 69">page 69</a></li> 
    <li class="level-1 page_item page-item-111"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=111" title="page 70">page 70</a></li> 
    <li class="level-1 page_item page-item-113"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=113" title="page 71">page 71</a></li> 
    <li class="level-1 page_item page-item-115"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=115" title="page 72">page 72</a></li> 
    <li class="level-1 page_item page-item-117"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=117" title="page 73">page 73</a></li> 
    <li class="level-1 page_item page-item-119"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=119" title="page 74">page 74</a></li> 

    <li class="level-1 page_item page-item-121"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=121" title="page 75">page 75</a></li> 
</ul> 
</li> 

它只是「菜單> 0級>兒童> 1級」。我有一點的jQuery的，看起來像這樣：

$(".level-0 > a").click(function() { 
      $('.level-0 > .children').toggle(); 
      return false; 
     }); 

我敢肯定有人比我聰明看到了問題：的onClick它打開每一個「孩子」的元素。我怎麼才能要求jQuery打開'我'點擊的'level-0'<li>元素的'children'元素？

對不起。總n00b和幫助的方式表示讚賞。

Answer 1

你想用$(this)和.siblings()在這種情況下找到<ul>比較，就像這樣：

$(".level-0 > a").click(function() { 
    $(this).siblings('.children').toggle(); 
    return false; 
}); 

You can test it out here，或添加一些動畫，like this。

$(this)是jQuery的包裹當前對象的版本，因爲<ul class="children">是同級的<a>你點擊，.siblings()是你要找到它的。