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

<强> EDITED

让我们来看看你的代码

$('#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");
  }
});

它做了什么？

此循环与前一循环非常相似，但它不相同。

有什么区别？

第二个循环使用li遍历元素内部的id="filter-private"元素，并首先遍历li内的id="filter-channel"元素
第二个循环检查属性data-value是否在filterOptions["providerGUID"]内，并首先检查filterOptions["claimTypeID"]是否在内。

回到你的问题 addClass不适用于第二次

第一个是否有效？是的

为什么第二个循环不会将active类添加到元素中，有几种可能性。

由于其属性data-value的值不在filterOptions["providerGUID"]内，
它添加了active类，但你只是看不到它（例如在css中你没有添加active中#filter-provider类的那个元素是可见的，
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");
  }
});

addClass不适用于第二个ul

1 个答案: