what is the right selector for this jQuery function? or $("#myElement")[0].href vs $("#myElement").href

Question

please see: http://jsfiddle.net/4Z4fQ/19/

consider the following html:

<a id="myElement" href="http://www.google.com/">
    <img id="image"  src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="google"/>
</a>

and the following script:

jQuery.fn.MyFunction = function (event) {
   alert('My function was called');
   alert(this.href);
};


$("#myElement").click(function (event) {
   //some processing

   $("#myElement").MyFunction(event);
});

without changing MyFunction, how do I change this line: $("#myElement").MyFunction(event); so I get the href to show in the alert?

Answer 1

Description

The selector is right. But you must call jQuery's .attr() function to get the href attribute because this is a jQuery Object.

Sample

jQuery.fn.MyFunction = function (event) {
   alert('My function was called');
   alert(this.attr("href"));
};

More Information

• Updated jsFiddle
• jQuery.attr()