решаемая.Я пытаюсь получить элементы прародителя, прапрадедушки ul
в элементе флажка, отмеченного нажатием, в древовидной структуре, используя функцию 'parent ()' в jQuery.
Я могу получить элемент родительского элемента ul
у которого class='accordion-heading'
, но я не могу получить его родителя и деда до первого предка этой ветви, например, первого набора ul
предка, который имеет class="accordion-heading"
, data-target="#MMenu_DTID1"
и текст = Admin
,не работает.
JQuery и разметка:
<div class="panel panel-default" style="border: currentColor; border-image: none; height: 80%;">
<div class="panel-heading panel-head" style="border: currentColor; border-image: none; width: 400px; height: 40px; background-color: gainsboro;">Security Permissions</div>
<div class="panel-body" id="Permissions" style="border: currentColor; border-image: none; width: 400px; height: 80%; background-color: ghostwhite;">
<form action="/Security/Update" method="post">
<div class="tree" style="border: currentColor; border-image: none; height: 1200px; -ms-overflow-y: hidden;">
<ul class="nav nav-list" style="border: currentColor; border-image: none;">
<li>
<span class="accordion-heading" aria-expanded="false" 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" id="MMenu_DTID1" style="padding-left: 20px;">
<li>
<span class="accordion-heading" aria-expanded="false" 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" id="S_menu1" style="padding-left: 60px;">
<li>
<span class="accordion-heading" data-toggle="collapse" data-target="#S_menu11">
<span class="checkbox subtree-checkbox styled 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" 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>
<li>
<span class="accordion-heading" aria-expanded="false" 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">
Contacts
</span>
<ul class="nav nav-list collapse" id="S_menu1" style="padding-left: 60px;">
<li>
<span class="accordion-heading" data-toggle="collapse" data-target="#S_menu11">
<span class="checkbox subtree-checkbox styled 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">
BusinessContacts
</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
</div>
$(function ()
{
$(".subtree-checkbox").click(function (e)
{
e.stopPropagation();
//this does get the immediate parent
var parent = $(this).parent(".accordion-heading").attr("data-target");
alert("checkbox parent = "+parent);
//this does NOT work
var parentEls = $(this).parents(".subtree-checkbox")
//specifying 'ul' does work this now gets the id's (data targets of the accordion-classes)
var parentEls = $(this).parents("ul")
.map(function ()
{
return this.id;
})
.get()
.join(", ");
alert("PE " + parentEls);
});
});