jQuery选择:如何选择刚才这个元素的孩子(jQuery Selector: How to sel

2019-11-04 07:32发布

所以,我的代码看起来像这样:

<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来打开刚才的“0级”的“儿童元素<li>元素我点击?

很抱歉的混乱。 总的n00b和帮助的方式表示赞赏。

Answer 1:

你想用$(this).siblings()在这种情况下,找到<ul>相对,就像这样:

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

你可以在这里测试一下 ,或添加一些动画, 像这样 。

$(this)是jQuery的包裹当前对象的版本,而且由于<ul class="children">是的兄弟<a>你点击时, .siblings()是你想要找到它是什么。



文章来源: jQuery Selector: How to select the children of just THIS element