jquery - 在 HTML 中查找链接以查看是否与数组匹配

Question

我有一个小问题，谁能帮我解决一下。基本上，我有一系列关键字，我想看看页面中是否有任何 href 链接与之匹配。如果是这样，请为其添加一些 CSS 效果。这是我目前拥有的:

我做了一个简单的“for”循环，因此它将循环遍历每个数组值，并为其更改 CSS。但由于某种原因它似乎不起作用。

var arr = [
  'lovely',
  'HeartsandMinds',
  'pieces',
];

var i = 0;
for (; i < arr.length; i++) {
  $("a[href*=arr[i]]").each(function() {
    $(this).css("cssText", "opacity:0.3;");
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Examples of links inside a tags (note that links do repeat in the page):

<a href="http://www.example/profile/jenny">Link1</a>
<a href="http://www.example/profile/lovely">Link2</a>
<a href="http://www.example/profile/OrangesandApples">Link3</a>
<a href="http://www.example/profile/pieces">Link4</a>
<a href="http://www.example/profile/semantics">Link5</a>
<a href="http://www.example/profile/JOHNNY44">Link6</a>
<a href="http://www.example/profile/HertsandMinds">Link7</a>
<a href="http://www.example/profile/lolla">Link8</a>
<a href="http://www.example/profile/OrangesandApples">Link3</a>
<a href="http://www.example/profile/lovely">Link2</a>

Answer 1

您可以构建一个组选择器并一次性完成所有操作:

$(arr.map(entry => 'a[href*="' + entry + '"]').join(",")).css("cssText", "opacity:0.3;");

或者仅使用 ES5，因为您在代码中没有使用任何 ES2015+:

$(arr.map(function(entry) { return 'a[href*="' + entry + '"]'; }).join(",")).css("cssText", "opacity:0.3;");

实例:

var arr = [
  'lovely',
  'HeartsandMinds',
  'pieces',
];

$(arr.map(function(entry) { return 'a[href*="' + entry + '"]'; }).join(",")).css("cssText", "opacity:0.3;");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Examples of links inside a tags (note that links do repeat in the page):

<a href="http://www.example/profile/jenny">Link1</a>
<a href="http://www.example/profile/lovely">Link2</a>
<a href="http://www.example/profile/OrangesandApples">Link3</a>
<a href="http://www.example/profile/pieces">Link4</a>
<a href="http://www.example/profile/semantics">Link5</a>
<a href="http://www.example/profile/JOHNNY44">Link6</a>
<a href="http://www.example/profile/HertsandMinds">Link7</a>
<a href="http://www.example/profile/lolla">Link8</a>
<a href="http://www.example/profile/OrangesandApples">Link3</a>
<a href="http://www.example/profile/lovely">Link2</a>

<小时/>

旁注:对于 .css("cssText", "opacity:0.3;"); 您可能需要 .css("opacity", 0.3); .

实例:

var arr = [
  'lovely',
  'HeartsandMinds',
  'pieces',
];

$(arr.map(function(entry) { return 'a[href*="' + entry + '"]'; }).join(",")).css("opacity", 0.3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Examples of links inside a tags (note that links do repeat in the page):

<a href="http://www.example/profile/jenny">Link1</a>
<a href="http://www.example/profile/lovely">Link2</a>
<a href="http://www.example/profile/OrangesandApples">Link3</a>
<a href="http://www.example/profile/pieces">Link4</a>
<a href="http://www.example/profile/semantics">Link5</a>
<a href="http://www.example/profile/JOHNNY44">Link6</a>
<a href="http://www.example/profile/HertsandMinds">Link7</a>
<a href="http://www.example/profile/lolla">Link8</a>
<a href="http://www.example/profile/OrangesandApples">Link3</a>
<a href="http://www.example/profile/lovely">Link2</a>