This question already has answers here:
jQuery object and DOM element
(6 answers)
Closed 7 years ago.
Is it possible to reverse jquery '$(this)' into javascript 'this'?
How can this be done?
jQuery is set based, and lets you access the elements of that set using either indexer notation ([]) or the get method.
So if you have a jQuery set:
var set = $(this);
...you can access its elements via set[0] through set[set.length - 1] and via set.get(0) through set.get(set.length - 1) (get also supports negative indexes for indexing from the end).
In the case of $(this), of course, you don't need to use $() at all — just use this directly. This is true whenever you have a raw DOM reference, whether this or event.target or whatever.
jQuery or $ is primarily just a wrapper function that returns a jQuery object. So removing the $ is all you need to get the normal DOM element this.
this // DOM ELement
$(this) // jQuery object
this // Again just a DOM Element
You need not do anything more. this will always be the primitive DOM Element, it's because you're wrapping it, that it returns you a jQuery object.
jQuery offers .get which does the same too, but offers the convenience of getting a specific element if this is a collection.
Related
This question already has answers here:
Get an element by index in jQuery
(5 answers)
Closed 5 years ago.
I have a problem with the following code
var elements = $(".myClasses");
elements[1].animate({something}, 1000);
If I use $(".myClasses").animate(...) it works, but why doesn't it work if I select just one element from the array?
I guess I maybe don't uderstand well the rules about objects or arrays.
That is because $(".myClasses") returns a jQuery object, and when you access it as an array it simply returns the DOM node and not a jQuery object. If you want to access them by index, simply use:
$(elements[1]), which converts the DOM node back into a jQuery object, so that you can apply jQuery methods to it, or
$(".myClasses").eq(1), which reduces a set of elements matched by the jQuery selector to a single element at the specified zero-based index. See documentation for .eq()
if you want to use a jquery function you have to cast a jquery object you do it like
$(elements[1]).animate(...
This question already has answers here:
Getting html DOM element from JQuery element
(2 answers)
Closed 6 years ago.
Here is my code:
$(.clsname).on("click", function(){
do_something($(this));
});
function do_something(sth){
/*
* in here sth equals $(this)
* and I want to get "this" of "$(this)"
*
* EX: this.value = "some value";
* I know I can do that like sth.val("some value");
* but I need to do that by following the first version (using "this")
*/
}
As you see, my question is commented in the code above. How can I do that?
Just use
sth[0]
which will convert into a DOM object
You can also use the get method on the jQuery object.
sth.get(0) // Extracts the native DOM element from jQuery object.
will also give you the same result.
What you want to do is get the elements that the jQuery object contains, without the jQuery wrapper. If you just have a single element, you can do either sth[0] or sth.get(0). If you have multiple elements you can use sth.toArray().
This question already has answers here:
What is the purpose of the dollar sign in JavaScript?
(12 answers)
Closed 9 years ago.
Please can anyone explain what this javascript code exactly does.
$('#element_id').html(response.title);
I need to access the value of the element_id but I can't using document.getElementById.
Thanks
This code just calls a function named $ and access a method of the returned object.
It's probably jQuery code due to the selector string.
$('#element_id'): Returns a jQuery object for the element with the given ID.
.html(response.title): Sets the inner HTML of the DOM element to response.title.
The raw JavaScript would look like this:
document.getElementById("element_id").innerHTML = response.title;
This code uses probably JQuery. The $ is the basic function defined by JQuery. You can call it to get access to element using a special query language defined by JQuery.
It looks like jQuery, which is a Javascript library. The $('#element_id') creates a jQuery object for the element with the id element_id in the DOM. Then .html(response.title) will put the value of response.title as HTML inside the element.
$ probably refers to jQuery, one of the most frquently used JS libraries.
What this snippet basically does is setting the HTML content of the element with the id element_id to the title attribute of the response object.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to get a DOM Element from a JQuery Selector
I know using normal javascript i can do
formitem.validity.valid
or
formitem.checkValidity();
How do i use Jquery to call these functions?
Below im using a custom attribute selector to get my element but cant seem to use it like below...
$('[data-dependID=pobText]').validity.valid
or
$('[data-dependID=pobText]').formitem.checkValidity();
Simple but how do i do this?
You need to get DOM Node for that:
$('[data-dependID=pobText]').get(0).validity.valid;
$('[data-dependID=pobText]').get(0).formitem.checkValidity();
Use Get,
i.e.
$('[data-dependID=pobText]').get(0).formitem.checkValidity();
Use .get(n) to get the nth element as a DOM object, or just [n]
$('selector').get(n).foo
or
$('selector')[n].foo
jQuery calls to the DOM return an array-like object and so you can access the DOM elements in the "array" by an index. The get() method does the same thing, only that it encapsulates this in a function call (which is an overhead).
Better use the index instead:
$('[data-dependID=pobText]')[n].validity.valid;
$('[data-dependID=pobText]')[n].checkValidity();
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to get a DOM Element from a JQuery Selector
I have a JavaScript library that takes one of parameters as
element: document.getElementById('file-uploader')
And it works well, though I try to use jQuery instead and error happens then.
element: $('#file-uploader')
I suppose these return different objects so how can I make it with jQuery but return an object of the same kind as if it were returned by getElementById method?
Try -
$('#file-uploader')[0] //or $('#file-uploader').get(0)
This will return the 'naked' JavaScript DOM object, the same as
document.getElementById('file-uploader')
would return. The example above will only return the first element of the matched set, but in a situation where you're searching by id that should be fine.
Try:
$('#file-uploader')[0]
It should be equiv to:
document.getElementById('file-uploader')
you have to use either [0] or .get(0) to return the dom object instead of the jquery:
$('#file-uploader')[0];
or
$('#file-uploader').get(0);