查找HTML中的链接以查看是否与数组匹配

时间：2018-10-22 07:38:41

标签： jquery

如果有人可以帮助我解决，我会有一个小问题。基本上，我有一组关键字，并且我想查看页面中的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>

4 个答案:

答案 0 :(得分：3)

您可以构建一个组选择器并立即完成所有操作：

$(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>

答案 1 :(得分：2)

您不见了：

  1. 选择器中arr[i]的串联
  2. 使用选择符$结尾，因为数组值似乎出现在href URL的末尾

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>
<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>

答案 2 :(得分：2)

您的代码有各种问题，我将使用单个each遍历数组中的项目，然后使用css("opacity", "0.3")

向每个找到的项目添加不透明度 

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

$.each(arr,function(i,v) {
 $("a[href*='"+v+"']").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>

答案 3 :(得分：0)

Use this match your requirement

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<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>



<script type="text/javascript">

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

$(document).ready(function(){


  $("a").each(function(i,html) {
           for (i=0; i <arr.length; i++) {
       var getMatchtext = $(html).attr('href').split('/profile/')[1];

    if(getMatchtext==arr[i]){
        $(this).css("cssText", "opacity:0.3;"); 
     }   

            }

  });

})
相关问题
最新问题