如何获得元素的父母，祖父母和曾祖父母？

Question

已解决。 我正在尝试使用jQuery的'parents（）'函数来获取树状结构中单击复选框元素的祖父母，曾祖父母ul元素。

我可以获取具有ul的父项class='accordion-heading'元素，但直到该分支的第一个祖先，我都无法获取它的父项和祖父母， 例如，具有ul，class="accordion-heading"和text = 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);


		});
	});