为什么jquery选择器不能在所有与选择器匹配的有效元素的实例中工作?

时间:2018-10-11 11:20:49

标签: html jquery-selectors

我有一个简单的jquery选择器,用于查找父项并设置其css,但是确实缺少某些确实具有选择器所要查找内容的Elements。 它找到的图像按照图像以红色边框显示。

我正在寻找Class =“ accordion-heading”的父母。 我已经尝试了Parents以及parent()。parents()..,但仍然看不到具有此类的某些元素。

jq是

var fullparent = BranchChkBoxArray[i][0];
$('#' + fullparent).parent().parent(".accordion-heading").css({ "color": "red", "border": "2px solid red" });

标记是

<li>
	<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMID_0">
		<span class="checkbox MMTree-checkbox styled red"><input name="MM_0" class="MMTree-checkbox styled red" id="MM_0" style="display: none;" type="checkbox" value="false" iid="0"></span>
		Admin
	</span>
	<ul class="nav nav-list collapse in" id="MMID_0" aria-expanded="true" style="padding-left: 20px;">
		<li>
			<span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#submenu_0_0">
				<span class="checkbox subtree-checkbox styled red"><input name="SM_0_0" class="subtree-checkbox styled red" id="SM_0_0" style="display: none;" type="checkbox" value="false" iid="1"></span>
				Debtors-Creditors
			</span>
			<ul class="nav nav-list collapse" id="submenu_0_0" aria-expanded="true" style="padding-left: 20px;">
				<li>
					<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#submenu_0_0SM_0_00">
						<span class="checkbox subtree-checkbox styled red"><input name="Pr_SM_0_00" class="subtree-checkbox styled red" id="Pr_SM_0_00" style="display: none;" type="checkbox" value="false" iid="0"></span>
						Read
					</span>
				</li>
				<li>
					<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#submenu_0_0SM_0_10">
						<span class="checkbox subtree-checkbox styled red"><input name="Pr_SM_0_10" class="subtree-checkbox styled red" id="Pr_SM_0_10" style="display: none;" type="checkbox" value="false" iid="0"></span>
						Create
					</span>
				</li>
				<li>
					<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#submenu_0_0SM_0_20">
						<span class="checkbox subtree-checkbox styled red"><input name="Pr_SM_0_20" class="subtree-checkbox styled red" id="Pr_SM_0_20" style="display: none;" type="checkbox" value="false" iid="0"></span>
						Update
					</span>
				</li>
				<li>
					<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#submenu_0_0SM_0_30">
						<span class="checkbox subtree-checkbox styled red"><input name="Pr_SM_0_30" class="subtree-checkbox styled red" id="Pr_SM_0_30" style="display: none;" type="checkbox" value="false" iid="0"></span>
						Delete
					</span>
				</li>
			</ul>

		</li>
		<li>
			<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#Smenu_0_1__1">
				<span class="checkbox subtree-checkbox styled red"><input name="SM_0_1" class="subtree-checkbox styled red" id="SM_0_1" style="display: none;" type="checkbox" value="false" iid="1"></span>
				Users
			</span>
			<ul class="nav nav-list collapse in" id="Smenu_0_1__1" aria-expanded="true" style="padding-left: 60px;">
				<li>
					<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#Smenu_0_1__10">
						<span class="checkbox subtree-checkbox styled red">
						<input name="SM_0_1_1" class="subtree-checkbox styled red" id="SM_0_1_1" style="display: none;" type="checkbox" value="false" iid="2"></span>
						new subby tst3
					</span>
					<ul class="nav nav-list collapse in" id="Smenu_0_1__10" aria-expanded="true" style="padding-left: 20px;">
						<li>
							<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#Smenu_0_1__10SM_0_1_1_00">
								<span class="checkbox subtree-checkbox styled green checked">
								<input name="Pr_SM_0_1_1_00" class="subtree-checkbox styled red" id="Pr_SM_0_1_1_00" style="display: none;" type="checkbox" value="false" iid="0"></span>
								Read
							</span>
						</li>
						<li>
							<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#Smenu_0_1__10SM_0_1_1_10">
								<span class="checkbox subtree-checkbox styled red">
								<input name="Pr_SM_0_1_1_10" class="subtree-checkbox styled red" id="Pr_SM_0_1_1_10" style="display: none;" type="checkbox" value="false" iid="0"></span>
								Create
							</span>
						</li>
						<li>
							<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#Smenu_0_1__10SM_0_1_1_20">
								<span class="checkbox subtree-checkbox styled red">
								<input name="Pr_SM_0_1_1_20" class="subtree-checkbox styled red" id="Pr_SM_0_1_1_20" style="display: none;" type="checkbox" value="false" iid="0"></span>
								Update
							</span>
						</li>
						<li>
							<span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#Smenu_0_1__10SM_0_1_1_30">
								<span class="checkbox subtree-checkbox styled red"><input name="Pr_SM_0_1_1_30" class="subtree-checkbox styled red" id="Pr_SM_0_1_1_30" style="display: none;" type="checkbox" value="false" iid="0"></span>
								Delete
							</span>
						</li>
					</ul>
				</li>
			</ul>

		</li>
		<li>
			<span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#Smenu_0_1__2">
				<span class="checkbox subtree-checkbox styled red"><input name="SM_0_2" class="subtree-checkbox styled red" id="SM_0_2" style="display: none;" type="checkbox" value="false" iid="1"></span>
				Contacts
			</span>
			<ul class="nav nav-list collapse" id="Smenu_0_1__2" style="padding-left: 60px;">
				<li></li>
			</ul>
		</li>
		<li>
			<span class="accordion-heading" aria-expanded="false" style="border: 2px solid red; border-image: none; color: red;" data-toggle="collapse" data-target="#submenu_0_3">
				<span class="checkbox subtree-checkbox styled red">
				<input name="SM_0_3" class="subtree-checkbox styled red" id="SM_0_3" style="display: none;" type="checkbox" value="false" iid="1"></span>
				Security
			</span>
			<ul class="nav nav-list collapse" id="Smenu_0_1__2" style="padding-left: 60px;">
				<li></li>
			</ul>
		</li>
	</ul>
</li>

所应用的红色边框css的图像。 enter image description here

1 个答案:

答案 0 :(得分:0)

我不完全知道您要在哪一点上为节点着色(它们是否都已加载?),但是我会尝试抓住列表的头部并使用.find()

也许这可以解决您的情况:

listHead.find('.accordion-heading').each(function () {
  $(this).css({ "color": "red", "border": "2px solid red" });
}