attr() showing undefined using jQuery

Question

The DOM is something like this:

<h3 class="iw"><span email="noreply@updates.com" name="test.com" class="gD">test.com</span></h3>

Now I want to get the email attribute of the span.

I tried following in console log.

console.log($(".iw span:first-child"));

I get the complete inner span element and its other line as undefined on the console.

Now if I try following on console log,

console.log($(".iw span:first-child").attr("email"));

It starts giving me this error:

Uncaught TypeError: $(...).attr is not a function(…)

It gives the same error for any jQuery method that I may use after that.

Image -

How can I fix this problem?

Its a generic page which I am trying to traverse of gmail single email detail page, it does not seem to have any other on first glance — Kaushik Ray, Mar 13 '16 at 05:31
That is the issue I am facing I also have multiple fiddles working with same, but it is not working based on steps above. Please try to give any inpus based on steps provided above — Kaushik Ray, Mar 13 '16 at 05:52
@KaushikRay Are those commands somewhere in your code or are you writing that on the browser console? If so, what does it say when you just input `$` and hit enter? If you see `function $(selector, [startNode]) { [Command Line API] }` that's not jQuery — JSelser, Mar 13 '16 at 06:55
Sounds like something is overwriting jQuery, Make sure you don't use any other JS library. — Shadow The GPT Wizard, Mar 13 '16 at 08:48
@JSelser, You have mentioned correctly, I am writing this on console log and on just running $ I am getting function $(selector, [startNode]) { [Command Line API] }, So does that mean my jquery is not loaded on page? then how come I am able to get normal console.log($(".iw span:first-child")) value on same console? — Kaushik Ray, Mar 13 '16 at 15:44
So try to debug. Start with `console.log($);` - what do you see? (you should get *function (a,b){return new e.fn.init(a,b,h)}*.) — Shadow The GPT Wizard, Mar 13 '16 at 15:53
It gives same as my previous comment - function $(selector, [startNode]) { [Command Line API] } — Kaushik Ray, Mar 13 '16 at 15:55
http://stackoverflow.com/questions/22244823/what-is-the-dollar-sign-in-javascript-if-not-jquery contains the answer. Anyway, you do **not** have jQuery, and that's 100% sure. Include jQuery properly, and you will be able to use its methods like `.attr()` and others. — Shadow The GPT Wizard, Mar 13 '16 at 15:56
Ok I will check the link, also added an image with console log commands. If it helps — Kaushik Ray, Mar 13 '16 at 15:59
You can also post here the HTML code you're using to include jQuery, maybe someone can spot what's wrong with it — Shadow The GPT Wizard, Mar 13 '16 at 16:01

score 0 · Answer 1 · answered Mar 13 '16 at 16:09

This works completely fine, you just need to make sure you're including the jQuery library before trying to console.log the email attribute.

Place this in the <head> of your HTML :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

So then calling console.log($(".iw span:first-child").attr("email")); will return 'noreply@updates.com'.

score 0 · Accepted Answer · answered Mar 13 '16 at 22:07

The browser console comes with a function $ that acts like jQuery but isn't. Said function is only available while on the browser console and not usable in scripts included in your page

Like aphextwix said in his answer, you should be fine if you include jQuery in your page like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

If you are absolutely sure you are including jQuery but still can't debug in the console with the $() try using jQuery() like so:

console.log(jQuery(".iw span:first-child").attr("email"));

attr() showing undefined using jQuery

2 Answers2