如何使用没有循环的特定选择器选择兄弟姐妹数组的每个子节点?

时间:2016-06-26 14:50:03

标签: javascript jquery

我有以下导航菜单:

<nav id="nav-primary" class="text-center">
    <button id="menu-main-toggle" class="dropdown-toggle script-dependant active">Menu</button>
    <ul id="menu-main" class="nav toggleable hide">
        <li class="menu-item odd first"><a class="menu-link" href="//localhost:3000/index.php/about/">About</a>
        </li>
        <li class="menu-item even"><a class="menu-link" href="/index.php/category/bahrain/">Bahrain</a>
        </li>
        <li class="menu-item odd parent"><a class="menu-link" href="/index.php/category/information-technology/">Information Technology</a>
            <button class="dropdown-toggle script-dependant">+</button>
            <ul class="toggleable hide">
                <li class="menu-item odd first parent"><a class="menu-link" href="/index.php/category/information-technology/web-development/">Web Development</a>
                    <button class="dropdown-toggle script-dependant">+</button>
                    <ul class="toggleable hide">
                        <li class="menu-item odd first"><a class="menu-link" href="/index.php/category/information-technology/web-development/html/">HTML</a>
                        </li>
                        <li class="menu-item even"><a class="menu-link" href="/index.php/category/information-technology/web-development/css/">CSS</a>
                        </li>
                        <li class="menu-item odd last"><a class="menu-link" href="/index.php/category/information-technology/web-development/javascript/">Javascript</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item even last"><a class="menu-link" href="/index.php/category/information-technology/unix/">Unix</a>
                </li>
            </ul>
        </li>
        <li class="menu-item even parent"><a class="menu-link" href="http://lipsum.com">Lorem</a>
            <button class="dropdown-toggle script-dependant">+</button>
            <ul class="toggleable hide">
                <li class="menu-item odd first parent"><a class="menu-link" href="http://lipsum.com">Ipsum</a>
                    <button class="dropdown-toggle script-dependant">+</button>
                    <ul class="toggleable hide">
                        <li class="menu-item odd first last"><a class="menu-link" href="http://lipsum.com">Dolor</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item even last"><a class="menu-link" href="http://lipsum.com">Situs</a>
                </li>
            </ul>
        </li>
        <li class="menu-item odd"><a class="menu-link" href="/index.php/category/snippets/">Snippets</a>
        </li>
        <li class="menu-item even last"><a class="menu-link" href="//localhost:3000/index.php/contact/">Contact</a>
        </li>
    </ul>
</nav>

每个li.parent都有一个.dropdown-toggle按钮。单击该按钮时,我想检查它是否为$(this).parent().siblings('.parent').child('.dropdown-toggle.active'),以便在切换另一个按钮时可以取消它们。我知道没有child()选择器,我无法在没有siblings([selector])或循环的情况下检查$.each个元素,但我想知道是否有方法吗?我想在if语句中使用它,所以我需要它简短而且处理时不重。

修改:刚刚结束使用$(this).parent().siblings('.parent').children('.active')。思想siblings()将是一个数组,我必须迭代它。显然它是一个对象,我可以在对象的每个元素上使用children()

1 个答案:

答案 0 :(得分:2)

使用find

$(this).parent().siblings('.parent').find('.dropdown-toggle.active')