jQuery Selector returns function instead of DOM

Question

This is an odd one..

The followings are taking place well after the page has been loaded. I'm trying to add a class to a known (I know the element's id) DOM element.

$('#day-08-07-2016')

However, this returns back a jQuery function, not the DOM element.

Since the selector is an Id and there is only one element on the page, i can't use the [0] or first() functions.

Ultimately, the followings doesn't work!

$('#day-08-07-2016').addClass('active')

The element clearly exists on the page. What am I doing wrong?

The problem you have is that the element isn't found, probably because it doesn't exist — MiGu3X
– MiGu3X, Commented Nov 1, 2016 at 15:00
Are you using document.ready function? If not how do you know when all the dom is available? — Neo
– Neo, Commented Nov 1, 2016 at 15:00
FYI: jQuery always returns a function - itself, to be more exact - because otherwise method chaining would not work in the first place. — C3roe
– C3roe, Commented Nov 1, 2016 at 15:02
$('#foo') searches for id="foo" - but you have id="#foo". The element you're looking for doesn't exist. — Tyler Roper
– Tyler Roper, Commented Nov 1, 2016 at 15:03

TheSoftwareJedi · Accepted Answer · 2016-11-01 15:27:08Z

2

The title of your question isn't really related. jQuery selectors always return a deferred function of sorts. Commonly called a jQuery set wrapper. In this case, it's wrapping an empty set.

I think your real confusion here is caused by the # that you put in the id. Get the # out of the id and you'll be fine. Alternatively, see other answers on escaping it.

edited Nov 1, 2016 at 15:27

answered Nov 1, 2016 at 15:19

TheSoftwareJedi

35.4k22 gold badges112 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:30:42Z

2

You're not finding the element because $('#day-08-07-2016') looks for an ID of day-08-07-2016.

Because your ID is already prefixed with a #, if you intend to keep it that way, you'd probably have to do:

$('[id="#day-08-07-2016"]').addClass('active');

EDIT: As DaniP suggests in the comments, you could also escape the # by doing:

$('#\\#day-08-07-2016')

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Nov 1, 2016 at 15:07

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

1 Comment

DaniP Over a year ago

Or $('#\\#day-08-07-2016')

Dekel · Accepted Answer · 2016-11-01 15:22:48Z

2

As already mentioned in the other answers - jQuery selector always returns a jQuery object (which you referred to as "function").

If you want to select some elements by id where the id starts with # - you should escape that char (using \\#).

Here is an example:

$(function() {
  console.log($('#\\#abc').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="#abc">content</div>

edited Nov 1, 2016 at 15:22

answered Nov 1, 2016 at 15:10

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

2 Comments

Ali Khakpouri Over a year ago

I should've mentioned that i'm using jQuery 1.9.1. Your solution doesn't apply for me!

Dekel Over a year ago

Updated the code to use jQuery 1.9.1 and everything works. Check again...

rajesh · Accepted Answer · 2016-11-01 15:33:35Z

0

If you want to know about your real mistake go to console of any browser,

in that add id of the any element with prefix '#'

then select the element using below js,

$("#test")

the result will be like object :

init {context: document, selector: "#test"}

if you try like below:

$("##test")

you will face the following error:

jquery.min.js:4 Uncaught Error: Syntax error, unrecognized expression: ##test(…)

then remove # prefix from your ID then try

$("#test")

the result will be like below,

[a#test]

Always avoid to use prefix '#' for id of the element and avoid to use prefix '.' for class of the element...

answered Nov 1, 2016 at 15:33

rajesh

1,48511 silver badges23 bronze badges

Comments

Ben Flowers · Accepted Answer · 2016-11-01 15:43:47Z

0

In css selectors the symbol # denotes an id whereas a . denotes a class.

$('.my-item') will return the jquery wrapped element which looks like <a class='myitem' href='#'>

$('#my-item') will return the jquery wrapped element which looks like <a id='myitem' href='#'>

In your case, it looks like your id values start with a #. In order to make your selector work, you have 2 options:

1) Escape the # character in your css selector. In this case your query will become $('#\\#day-08-07-2016').addClass('active')

2) Change your ids so that they do not start with the # character, and your query can remain the same.

Personally I would go with 2 here.

answered Nov 1, 2016 at 15:43

Ben Flowers

1,5947 gold badges22 silver badges53 bronze badges

Collectives™ on Stack Overflow

jQuery Selector returns function instead of DOM

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related