How do I border an image by selecting a part of the title?

Question

Hi all,

hope you can help me solving my problem.

These two images are linked somewhere on a site.

<a href="?FRUIT=banana><img height="40" src="../../banana.jpg?format=raw" title="Banana - yellow"></a>

<a href="?FRUIT=apple><img height="40" src="../../apple.jpg?format=raw" title="Apple - green"></a>

I want to border them to start writing a function.

As you can see the title of each image contains the fruit and a color which should be associated by hearing the fruit.

I started creating an array.

var colors = ['yellow','green'];

Each element of the array should be bordered by 3px dotted green.

for(var i = 0;i < colors.length;i++){
.css('border','3px dotted green');
}

But how do I get the title of the image containing the color to border it with 3px dotted green?

Thank you in advance.

Answer 1

for(var i = 0;i < fruits.length;i++){
 $('img[title$='+fruits[i]+']').css('border','3px dotted green');
 var title =  $('#'+fruits[i]).attr('title');
}

this is how you can get the title and will border all the images which title end with any of the colors in fruits array.

Answer 2

for clarity it would probably be better to use an object to reference your colors by fruit name.

var fruit_colors = {Banana: "yellow", Apple: "red", Lime: "green", Grape: "purple"};
for(k in fruit_colors){
  $("img[title^=" + k).css("border","3px dotted " + fruit_color[k])
}