jquery / learn.jquery.com

jQuery Learning Center web site content

Home Page:https://learn.jquery.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

The last example on "How to Create a Basic Plugin" returns a different result than the previous example.

Jeff-Schafer opened this issue · comments

The last example on https://learn.jquery.com/plugins/basic-plugin-creation/ says:
"Our plugin can be optimized though:"
and shows the "optimized" code.

But the example before it, when run, just appends the text in the href for that tag, & this "optimized" code appends the full path to where the .html file is to what is in the href for that tag.

The first example under the "Putting It Together" correctly appends "page.html" to the text between the tags.
---> Foo (page.html)

Using a local .html file (like on the Desktop), the "optimized" returns:
---> Foo file:///C:/users/..../Desktop/page.html (without the parentheses, unlike in the first example).

Below the last example, it says:
"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."

To make it have the same results as the first example in this section "this.href" needs to be replaced with "$(this).attr("href")".

This will contradict the text mentioned above ("not using the .attr() method"), and needs to be updated.

To make it have the same results as the first example in this section "this.href" needs to be replaced with "$(this).attr("href")".

Not sure I understand. Are you saying you get different results with this.href rather than $(this).attr("href")? Can you post an example?

Yes. See the attached Screenshot & .html doc code of all 3 examples.

How to Create a Basic Plugin.zip

how to create a basic plugin

As far as i know 'this.href' returns the absolute url as it directly uses the javascript implementation of the browser because of which it combines the interpreted href attribute with the current host URL.
Whereas '$(this).attr("href")' wraps the element in a jquery object and returns simply the exact string which is in the HTML.

So,I think we can do one of the following to fix this issue

1.We can either use '$(this).attr("href")' in the optimized code and remove the sentence
"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."

2.We can add to the information provided below the code saying that "this.href will return absolute URL.In case you need relative URL as in above code you can use '$(this).attr("href")'."

I would like to take up this issue.So,please guide me which approach should I follow.

@dmethvin which approach should i start working with '1' or '2' or what Jeff-schafer has suggested which is a combination of both?