jQuery show link location

by Lucille Kenney

HTML

<button id="btn">Click</button>

<h1 id="first_H1">First H1 Header <a href="page.html">Foo</a></h1>
<p class="first_paragraph">This is my first paragraph.</p>
<p>This is my second paragraph.</p>
<p>This is my third paragraph.</p>

<h1 id="second_H1">First H1 Header</h1>
<p class="first_paragraph">This is my first paragraph.</p>
<p>This is my second paragraph.</p>
<p>This is my third paragraph.</p>

<ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

JavaScript

/* This handy plugin goes through all anchors in the collection and appends the href attribute in parentheses.*/

/*$(function($){
    $.fn.showLinkLocation = function(){
        this.filter("a").each(function(){
            var link = $(this);
            link.append( " (" + link.attr( "href" ) + ")" );
        });
        
        return this;
    console.log(link[0]);    
    };
}(jQuery));

$("a").showLinkLocation();*/

/*This handy plugin goes through all anchors in the collection and appends the href attribute in parentheses.

We're using the .append() method's capability to accept a callback, and the return value of that callback will determine what is appended to each element in the collection. Notice also that we're not using the .attr() method to retrieve the href attribute, because the native DOM API gives us easy access with the aptly named href property.*/

(function($){
    
    $.fn.showLinkLocation = function(){
        this.filter("a").append(function(){
            return "(" + this.href + ")";
        });
        
        return this;
    };
    
$("a").showLinkLocation();

}(jQuery));