Jquery returning object not selector element

Question

I have html like this

<input id="paymentNumber" type="text" class="form-control input-sm bot-buffer" placeholder="Payment Number">

but when i try to get html tag in jquery like this $('#paymentNumber') it is returning me jquery object instead of html tag of this specific id. But although i can get the html tag like this $('#paymentNumber')[0]

This issue wasn't appeared before today, I always get html tag like this but my question is why it is making every html element a jquery object.

Is it some update in jquery or in console or something else?

Using JQuery will always return Jquery objects so it can be further manipulated — Ahs N, Oct 27 '16 at 12:21
wscourge it returns me 0:input#paymentNumber.form-control.input-sm.bot-buffer length:1 __proto__:Object[0] — Hamza Haider, Oct 27 '16 at 12:28
i get the html tag which is on 0 index of jquery object lucas costa — Hamza Haider, Oct 27 '16 at 12:29

score 5 · Accepted Answer · answered Oct 27 '16 at 12:27

jQuery has always returned a "wrapped set" or group of selected objects. Perhaps, previously, you have only returned exacting wrapped sets that included only the element you were looking for (you selected by ID). Perhaps now you have stumbled upon a whole new world whereby you can select by class (to get many elements in a single wrapped set), only you weren't expecting nor prepared for that.

Just a note, but if you want the actual HTML tag name, you need:

$('#my_element').prop('tagName');

And to get the single wrapped object you can either use array access like you did

$('.many_elements')[0];

Or you can get the first element:

$('.many_elements').first();

Hope that helps clear it up.

score 0 · Answer 2 · answered Oct 27 '16 at 12:25

To get the html of an id you would just add .html() onto the end like so;

// console.log($('#paymentNumber'))
console.log($('#paymentNumber').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="paymentNumber" type="text" class="form-control input-sm bot-buffer" placeholder="Payment Number">

just using $('#paymentNumber') will return an object containing a lot of information about the div

Jquery returning object not selector element

2 Answers2