CODEWITHSUNDEEP
jqueryhtmldom
Ali Khakpouri
Ali Khakpouri

Reputation: 873

jQuery Selector returns function instead of DOM

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. enter image description here

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. enter image description here What am I doing wrong?

Upvotes: 1

Views: 1762

Answers (5)

Ben Flowers
Ben Flowers

Reputation: 1554

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.

Upvotes: 0

rajesh
rajesh

Reputation: 1485

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...

Upvotes: 0

TheSoftwareJedi
TheSoftwareJedi

Reputation: 35196

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.

Upvotes: 2

Dekel
Dekel

Reputation: 62576

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>

Upvotes: 2

Tyler Roper
Tyler Roper

Reputation: 21672

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')

Upvotes: 2

Related Questions