jquery 仅当链接文本位于数组中时才应用 addClass 到链接

Question

我有一个数组:

var List2 = ['Maine', 'Maryland', 'Massachusetts', 'New Jersey', 'Oklahoma'];

我有 php 生成的表行，其中包含链接，每个链接上都有类 .one。

<a class="one" href="http://www.maine.gov/aPage.shtml">Maine</a>
<a class="one" href="https://www.colorado.gov/aPage.aspx">Colorado</a>

单击链接时，如果链接文本中的州位于数组中(例如缅因州)，则目标是打开一个 div，但如果链接文本中的州不在数组中则打开链接(例如科罗拉多州)

为此，我想仅向链接文本出现在数组中的类添加 .openDiv。然后.openDiv 将用于打开div。

我正在迭代(我认为)使用each()来查找数组中带有文本的所有链接并应用openDiv。

当我手动测试它们时，两个链接都工作正常，但我的 addClass 代码将 .openDiv 应用于列表中的每个链接，并且我不知道如何将其限制为仅数组中的链接。我的 .js 脚本位于页面底部。

这是代码

$(document).ready(function() 
{var List2 = ['Idaho', 'District of Columbia', 'Maine', 'Maryland', 'New Jersey', 'Oklahoma'];

$("a[href]").each(function() {
if(jQuery.inArray($("a[href]").html(), List2) !== -1) {
$("a[href]").addClass('openDiv');
}
});
$(".openDiv").click(function(e) {
e.preventDefault();
$("#notInList1").slideToggle(200);
});
 });

我已经尝试过

$("a[href]").text()

以及各种形式的$this，但是不行。我读过 3 或 4 个其他问题，但没有一个是相同的。有谁知道我应该如何使用 $this 来修复它，或者我的each() 函数搞砸了？

Answer 1

问题是因为您在添加类时选择了所有 a[href] 元素。而是在 each() 处理程序中使用 this 关键字将类仅添加到当前元素:

$(document).ready(function() {
  var List2 = ['Idaho', 'District of Columbia', 'Maine', 'Maryland', 'New Jersey', 'Oklahoma'];

  $("a[href]").each(function() {
    if (List2.indexOf($(this).text()) != -1) {
      $(this).addClass('openDiv'); // note 'this' here
    }
  });
});

.openDiv { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="one" href="http://www.maine.gov/aPage.shtml">Maine</a>
<a class="one" href="https://www.colorado.gov/aPage.aspx">Colorado</a>