Question

我在.child课程上有点击事件。我想从这个班级到达.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遍历的较短版本

1 个答案: