Почему селектор jquery не работает во всех случаях, когда существуют допустимые элементы, соответствующие его селектору?

Question

У меня есть простой селектор jquery, чтобы найти родителей и установить их css, но некоторые из элементов, которые имеют то, что ищет селектор, полностью отсутствуют.Те, которые он находит, выделены красным цветом в соответствии с изображением.

Я ищу родителя с Class = "accordion-heading".Я пробовал Parents так же как parent (). Parent () .. но он все еще не видит некоторые элементы, которые имеют этот класс.

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.

Answer 1

Я точно не знаю, в какой момент вы пытаетесь закрасить узлы (все ли они загружены?), Но я бы попытался захватить список по его голове и использовать .find()

Может быть, это будет работать в вашем случае:

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