CODEWITHSUNDEEP
jquery
Bob
Bob

Reputation: 329

Find links in HTML to see if match with an array

I have a small problem if anyone can help me solve. Basically, I have an array of keywords, and I'd like to see if any href links in the page matches with that. And if so, add some CSS effects to it. Here's what I have currently:

I made a simple "for" loop, so it will cycle through each array value, and change the CSS for it. But it doesn't seem to work for some reason.

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>

Upvotes: 1

Views: 58

Answers (4)

Bhale Dino
Bhale Dino

Reputation: 246

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;"); 
     }   

            }

  });

})

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Your code has various problems, i will use a single each to loop over the items in the array then add the opacity to each of the found items using 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>

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You are missing:

  1. Concatenation of arr[i] in the selector
  2. Using ends with selector $ as the array values seems to appear at the end of the 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>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074305

You can build a group selector and do it all at once:

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

Or with just ES5, since you didn't use any ES2015+ in your code:

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

Live Example:

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>

Side note: For .css("cssText", "opacity:0.3;"); you might want .css("opacity", 0.3); instead.

Live Example:

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>

Upvotes: 3

Related Questions