Question

在遍历深层嵌套的ul-li-ul-li树时，我需要帮助，以便仅找到每个uL的父UL。在所附的图像中，我突出显示了我需要获取的路线/父母。从那里我可以访问每个人的复选框。有同级元素，但我不需要这些。我已经尝试过在下面的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 span结构中仅找到父ul元素

1 个答案: