DOM遍历的较短版本

Question

我在 .child class 上有一个点击事件。我想从这个 class 到达 .productHolder div。现在我有一个很长的选择器。我想知道是否有更短的版本可以做到这一点。

HTML:

<ul class="sm sm-simple">
    <li>
        <a href="#">INTERNET</a>
        <ul>
            <li>
                <a href="#">Prod 1</a>
                <ul>
                    <li><a href="#" class="child">Var M</a></li>
                    <li><a href="#" class="child">Var L</a></li>
                    <li><a href="#" class="child">Var XL</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Prod 2</a>
                <ul>
                    <li><a href="#">Var 1</a></li>
                </ul>
            </li>
        </ul>
        <div class="productHolder"></div>
    </li>
</ul>

JS:

$('.child').on('click', function (event) {
    productHolder = $(event.target).parent().parent().parent().parent().siblings('.productHolder');
});

Answer 1

根据你现有的HTML结构，你可以使用.closest()遍历到sm-simple，然后可以使用find()。

 productHolder = $(this).closest('.sm-simple').find('.productHolder');

DOM遍历的较短版本

Shorter version for DOM traversing

jquery

jquery-traversing