jQuery Selector:如何选择仅此元素的子元素 [英] jQuery Selector: How to select the children of just THIS element

问题描述

所以，我有如下代码:

<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，我们非常感谢您的帮助.

解决方案

您要使用$(this)和 .siblings() 在这种情况下可以相对地找到<ul>，例如:

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

您可以在此处进行测试，或添加一些动画，是您单击的<a>的同级，因此

It just goes "menu > level-0 > children > level-1". I have a bit of jQuery that looks like this:

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

I'm sure anyone smarter than me sees the problem: onClick it opens EVERY 'children' element. How can I ask jQuery to open the 'children' element of JUST the 'level-0' <li> element I click on?

Sorry for the mess. Total n00b and the help is way appreciated.

解决方案

You want to use $(this) and .siblings() in this case to find the <ul> relatively, like this:

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

You can test it out here, or add some animation, like this.

$(this) is the jQuery wrapped version of the current object, and since the <ul class="children"> is a sibling of the <a> you clicked, .siblings() is what you want to find it.

这篇关于jQuery Selector:如何选择仅此元素的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！