addClass не работает на второй ул

Question

У меня есть этот код:

$('#filter-channel li').each(function() {
  if (filterOptions["claimTypeID"].includes($(this).find('a').attr('data-value'))) {
    $(this).find('a').addClass("active");
  }
});

$('#filter-provider li').each(function() {
  if (filterOptions["providerGUID"].includes($(this).find('a').attr('data-value'))) {
    $(this).find('a').addClass("active");
  }
});

Первый класс добавления работает нормально, а второй - нет.Я уверен, что это входит в условное.Это просто не добавляет класс, как это должно было быть.Я не ищу прямой ответ, я просто хочу знать, что является возможной причиной этого?

РЕДАКТИРОВАТЬ: Вот HTML-код для этого

<ul id="filter-menu" class="mr-dropdown-menu mr-dropdown-menu-multiselect dropdown-menu">
	<li role="presentation" class="dropdown-header">CHANNEL</li>
	<li role="presentation" class="open">
		<ul id="filter-channel"
			class="mr-dropdown-menu dropdown-menu"
			style="margin: 0 -5px; padding-bottom: 10px; width: 300px"
			role="menu"
			data-role="listview"
			data-auto-bind="false"
			data-template="filter-channel-template"
			data-bind="{source: channelFilterListDataSource}">
		</ul>
	</li>
	<li role="presentation" class="dropdown-header">PROVIDER</li>
	<li role="presentation" class="open">
		<ul id="filter-provider"
			class="mr-dropdown-menu dropdown-menu"
			style="margin: 0 -5px; padding-bottom: 10px; width: 300px"
			role="menu"
			data-role="listview"
			data-auto-bind="false"
			data-template="filter-provider-template"
			data-bind="{source: providerUserListDatasource}">
		</ul>
	</li>
</ul>

Вот шаблон для атрибута data-template:

<script type="text/x-kendo-template" id="filter-provider-template">
<li role="presentation">
    <a class="mr-active-checked" role="menuitem" data-filter="providerGUID" data-value="#= userGuid #" data-bind="click: filterUnclaimed">#: userFullName #</a>
</li>
</script>
<script type="text/x-kendo-template" id="filter-channel-template">
<li role="presentation">
    <a class="mr-active-checked" role="menuitem" data-filter="claimTypeID" data-value="#= lookupValue #" data-bind="click: filterUnclaimed">#: lookupText #</a>
</li>
</script>

Answer 1

РЕДАКТИРОВАНИЕ

Давайте взглянем на ваш код

$('#filter-channel li').each(function() {
  if (filterOptions["claimTypeID"].includes($(this).find('a').attr('data-value'))) {
    $(this).find('a').addClass("active");
  }
});

$('#filter-provider li').each(function() {
  if (filterOptions["providerGUID"].includes($(this).find('a').attr('data-value'))) {
    $(this).find('a').addClass("active");
  }
});

Часть первая

$('#filter-channel li').each(function() {
  if (filterOptions["claimTypeID"].includes($(this).find('a').attr('data-value'))) {
    $(this).find('a').addClass("active");
  }
});

Что он делает?

Этот цикл повторяет каждый элемент li, который находится внутри элемента с id="filter-channel", и добавляет класс active ко всем элементам привязки, атрибут которых data-value находится внутриfilterOptions["claimTypeID"] переменная.

Часть вторая

$('#filter-provider li').each(function() {
  if (filterOptions["providerGUID"].includes($(this).find('a').attr('data-value'))) {
    $(this).find('a').ddClass("active");
  }
});

Что это делает?

Этот цикл очень похожк предыдущему, но это не то же самое.

В чем различия?

1. Второй цикл повторяет элементы li, которые находятся внутри элемента сid="filter-private" и сначала перебирает элементы li внутри id="filter-channel"
2. Второй цикл проверяет, находится ли атрибут data-value внутри filterOptions["providerGUID"], и сначала проверяет, находится ли внутри filterOptions["claimTypeID"].

Итак, вернемся к вашему вопросу addClass не работает на втором ul

Работает ли первый? Да

Есть несколько возможностей, почему второй цикл не добавляет active класс к элементам.

1. Поскольку значение их атрибута data-value не равновнутри filterOptions["providerGUID"],
2. Он добавляет класс active, но вы его просто не видите (например, в CSS вы не добавили этот элемент с классом active внутри #filter-provider видимый),
3. В элементе li внутри элемента #filter-provider нет тегов привязки.

Дополнительно

Избегайте использования $(this) больше, чемодин раз.Если вам нужно, просто сохраните его как переменную.Он потребляет меньше памяти.

Пример

$('#filter-provider li').each(function() {
  var liElement = $(this);
  if (filterOptions["providerGUID"].includes(liElement.find('a').attr('data-value'))) {
    liElement.find('a').addClass("active");
  }
});