jquery - 如何在深度嵌套的ul-li跨度结构中仅查找父ul元素
问题描述
我需要帮助来遍历深度嵌套的 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>
解决方案
对于每个嵌套的 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>推荐阅读
- php - 限制 wordpress 页面中的几个类别
- php - 从 php 版本 7.0 切换到 7.1 后，PDF 创建不再有效
- javascript - 我对传感器的理解和js代码是否正确
- r - 如何从 CRAN（在 MacOS 上）在 R 上安装软件包？
- python - 如何将给定 URL 中的值导入 python
- java - 如何有效地使用 apache-poi 从 FTP 服务器读取大型 excel 文件？
- mfc - 检测是否使用 MFC 安装了 Opera 浏览器
- vue.js - 除了单击的按钮外，如何禁用按钮？
- c# - Is there any Solution for my code problem in webbrowser to identify between Select tag and option
- react-native - react-navigation 和 api 调用的 Redux 错误