如何在深度嵌套的 ul-li 跨度结构中仅查找父 ul 元素

Question

我需要帮助遍历深度嵌套的 ul-li-ul-li 树，以仅找到每个 uL 的父 UL。在附图中，我突出显示了我需要获得的 route/parents。从那里我可以访问每个复选框。有兄弟元素，但我不需要那些。我尝试了以下 jquery 函数的变体（全部注释掉）<，但没有成功。

$(function ()
 {
  $(".subtree-checkbox").click(function (e)
  {
   var id = $(this).find("input[type=checkbox]").attr("id");

                        //var arr = $(this).parents("ul").attr("id");
   //var parent2 = $(this).parent("ul").find("ul").attr("id");

                         var myArray = [];
   //var parentEls = $(this).parents("ul").find("input[type=checkbox]")
   //var parentEls = $(this).parents().find("ul").attr("id")
    .map(function ()
    {
     //alert(this.id);
     myArray.push(this.id);
    })
    .get()
    .join(", ");
   alert(myArray.length);
      
                       $.each(myArray, function (key, value)
   {
    //alert(key + ": " + value);
                      });
      
                });
     
       });

<body>
<ul class="nav nav-list" id="MM0" style="border: currentColor; border-image: none;">
    <li>
        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID1">
            <span class="checkbox MMTree-checkbox styled red"><input name="SM_IsPermitted1" class="MMTree-checkbox styled red" id="SM_IsPermitted0" style="display: none;" type="checkbox" value="false" iid="1"></span>
            <input name="MM_IsPermitted1" type="hidden" value="false">
            Admin
        </span>
        <ul class="nav nav-list collapse in" id="MMenu_DTID1" aria-expanded="true" style="padding-left: 20px;">
            <li>
                <span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#submenu_1">
                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted1" class="subtree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
                    <input name="SM_IsPermitted1" type="hidden" value="false">
                    Debtors-Creditors
                </span>
                <ul class="nav nav-list collapse" id="MMenu_DTID1" aria-expanded="true" style="padding-left: 20px;">
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID110">
                            <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            Read
                        </span>
                    </li>
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID110">
                            <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            Create
                        </span>
                    </li>
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID110">
                            <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            Update
                        </span>
                    </li>
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID110">
                            <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            Delete
                        </span>
                    </li>
                </ul>
            </li>
            <li>
                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1">
                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted1" class="subtree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
                    <input name="SM_IsPermitted1" type="hidden" value="false">
                    Users
                </span>
                <ul class="nav nav-list collapse in" id="S_menu1" aria-expanded="true" style="padding-left: 60px;">
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu11">
                            <span class="checkbox subtree-checkbox styled green red"><input name="SM_IsPermitted11" class="subtree-checkbox styled red" id="SM_IsPermitted11" style="display: none;" type="checkbox" value="false" iid="2"></span>
                            <input name="SM_IsPermitted11" type="hidden" value="false">
                            new subby tst3
                        </span>
                        <ul class="nav nav-list collapse in" id="S_menu11" aria-expanded="true" style="padding-left: 20px;">
                            <li>
                                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1110">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    Read
                                </span>
                            </li>
                            <li>
                                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1110">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    Create
                                </span>
                            </li>
                            <li>
                                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1110">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    Update
                                </span>
                            </li>
                            <li>
                                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1110">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    Delete
                                </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

对于每个嵌套的 ul - 使用 .closest() 获取其祖先 li。然后简单地获取那个 li 的 parent() 的 id，它会给你一系列的 id——我正在控制台记录父和子 ul id。

顺便提一下，在提供的嵌套列表中 - 您有两个具有相同 ID (MMenu_DTID1) 的实例，因此应该进行修改。

$('ul').each(function(){
 var el = $(this).attr('id');
 var parent = $(this).closest('li').parent().attr('id');
 parent == undefined
  ? console.log('Root UL id is ' + el )
  : console.log(parent + ' > ' + el);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-list" id="MM0" style="border: currentColor; border-image: none;">
    <li>
        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID1">
            <span class="checkbox MMTree-checkbox styled red"><input name="SM_IsPermitted1" class="MMTree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
            <input name="MM_IsPermitted1" type="hidden" value="false">
            Admin
        </span>
        <ul class="nav nav-list collapse in" id="MMenu_DTID1" aria-expanded="true" style="padding-left: 20px;">
            <li>
                <span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#submenu_1">
                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted1" class="subtree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
                    <input name="SM_IsPermitted1" type="hidden" value="false">
                    Debtors-Creditors
                </span>
                <ul class="nav nav-list collapse" id="MMenu_DTID1" aria-expanded="true" style="padding-left: 20px;">
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID110">
                            <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            Read
                        </span>
                    </li>
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID110">
                            <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            Create
                        </span>
                    </li>
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID110">
                            <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            Update
                        </span>
                    </li>
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMenu_DTID110">
                            <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            Delete
                        </span>
                    </li>
                </ul>
            </li>
            <li>
                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1">
                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted1" class="subtree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
                    <input name="SM_IsPermitted1" type="hidden" value="false">
                    Users
                </span>
                <ul class="nav nav-list collapse in" id="S_menu1" aria-expanded="true" style="padding-left: 60px;">
                    <li>
                        <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu11">
                            <span class="checkbox subtree-checkbox styled green red"><input name="SM_IsPermitted11" class="subtree-checkbox styled red" id="SM_IsPermitted11" style="display: none;" type="checkbox" value="false" iid="2"></span>
                            <input name="SM_IsPermitted11" type="hidden" value="false">
                            new subby tst3
                        </span>
                        <ul class="nav nav-list collapse in" id="S_menu11" aria-expanded="true" style="padding-left: 20px;">
                            <li>
                                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1110">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    Read
                                </span>
                            </li>
                            <li>
                                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1110">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    Create
                                </span>
                            </li>
                            <li>
                                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1110">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    Update
                                </span>
                            </li>
                            <li>
                                <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#S_menu1110">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted10" class="subtree-checkbox styled red" id="SM_IsPermitted10" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    Delete
                                </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

如何在深度嵌套的 ul-li 跨度结构中仅查找父 ul 元素

How to find only parent ul elements in a deeply nested ul-li span structure

html

jquery

parent