Как получить от родителей, прародителей и прадедов элемент? - PullRequest
0 голосов
/ 01 октября 2018

решаемая.Я пытаюсь получить элементы прародителя, прапрадедушки 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);


		});
	});
...