javascript - 如何在jquery中到达外部父div $(this)

Question

<ul id="menu-content" class="menu-content collapse in">
    <li  id="parent-menu" data-toggle="collapse" data-target="#<?= $model->idmain ?>" class="collapsed">
        <a href="?r=catalog/category&route=<?= $model->idmain ?>"> 
            <?= $model->main_category_name ?>
        </a> 
        <span class="arrow"></span>
    </li>
    <ul class="sub-menu collapse" id="<?= $model->idmain ?>">
        <!-- wanna change this -->
        <li  data-toggle="collapse" data-target="#abc<?= $modelsub->idsubcategory ?>">
            <a href="?r=catalog/sub-category&route=<?= $model->idmain ?>&routes=<?= $modelsub->idsubcategory ?>">
                sub_category_name ?>
            </a>
            <span class="arrow"></span>
        </li>
    </ul>
    <ul class="sub-menu collapse" id="abc<?= $modelsub->idsubcategory ?>">
        <li>
            <!-- im here -->
            <a href="?r=catalog/det-category&route=<?= $model->idmain ?>&routes=<?= $modelsub->idsubcategory ?>&router=<?= $modeldet->iddetail ?>"></a>
        </li>
    </ul>
</ul>

 var loc = window.location.href;
$("#menu-content li a").each(function () {
    var status = loc.indexOf($(this).attr("href")) > -1;

    if (status) {

        $(this).closest("li").addClass("active");
        $(this).closest("ul").addClass( "in" );
        $(this).closest(".sub-menu").prev(".sub-menu").addClass( "in" );
    }
});

我想到达那里(在我的代码中输入的注释)。我尝试使用 .parent().find 但它不起作用。我查看了另一页，但没有成功。感谢您抽出时间。

Answer 1

使用不带 ID 或 className 的 .prev() 或 .closest() 绝不是一个好主意。原因是您的 DOM 最终可能会发生变化，其中 .prev() 或 .closest() 位置中的标记不再映射到 <UL>标签，您正在寻找的。

但是，您可以向上遍历 DOM，然后向下遍历 DOM 以找到您要查找的内容。因此，每当 DOM 发生更改时，您的代码仍将针对相同的 <UL>标签。

$(this).parents('.menu-content').find('.sub-menu')

这对于仅定位 1 个标签来说更有效，因为祖先链中可能有多个嵌套的 .sub-menu 类名。但是，必须同时使用closest() 和prev() 函数。否则，代码将无法工作。 Closest() 函数不能单独使用。查看此更新 jsfiddle例如，这表明它们可以一起使用。

$(this).closest("ul").prev("#<?= $model->idmain ?>");