For each link where href equals myValue

Question

Why is the following not changing the text to it worked?

//JAVASCRIPT/JQUERY:

$('a').each(function(i) {
    if($(i).attr("href") == "mywebsite.co.uk")
    {
        $(i).innerHTML = "It Worked!";
    }
});


//HTML:

<a href="mywebsite.co.uk"></a>

Debugging it doesn't seem to pick up the href value.attr but I may be getting it all wrong can someone please make sure I have the above correctly done?

Answer 1

i is the index of the element, you want the element and should use should use something like:

// The first argument is the index, the second is the element
$('a').each(function(index, element) {
    if($(element).attr("href") == "mywebsite.co.uk")
    {
        $(element).html("It Worked!"); // Change this to .html()
    }
    console.log('Index is:'+index+', Element is'+element);
});​

<a href="mywebsite.co.uk"></a>

Also, I changed the .innerHtml() to .html("content in here"). To update the HTML inside the returned <a></a> tag (element).

Check this JSFiddle. http://jsfiddle.net/2scug/1/