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().
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:
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.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 7 years ago.
I am trying to inject some javascript into a web page using a very simple js script:
var c = document.getElementsByClassName("main").innerHTML;
alert(c);
I want to set an alert of the text (and only the text) in the div with class="main". Currently the script is making an alert pop up saying 'undefined'. What am I doing wrong, the class name is definitely correct, and I have searched stackoverflow and other sources, having experimented with .innerHTML and .textContent but nothing seems to be able to simply return a var of text.
getElementsByClassName returns an array like object. There is no innerHTML property on it. You need to either act on all the divs returned or a specific one. See docs for further examples. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
document.getElementsByClassName returns an array because there could be multiple classes with the same class name.
Try doing
var c = document.getElementsByClassName("main")[0].innerHTML;
alert(c);
The issue is that you are returning a set of nodes (HTMLCollection). All elements with the class "main" (getElementsByClassName). For example, this will show you the first element's innerHTML
var c = document.getElementsByClassName("main")[0].innerHTML;
alert(c);
However, a more standardized approach for this would be to use querySelector like this
var c = document.querySelector(".main").innerHTML;
alert(c);
With getElementsByClassName() it returns an array(in this case a group of elements) which you have to define an offset to mark which one of the elements you want to use:
document.getElementsByClassName("main")[0].innerHTML;//0 returns the first element
JSFiddle Demo
If you want to select all the elements of the class, the easiest way is to use a loop:
var element =document.getElementsByClassName("main");
for($i=0;$i<=element.length;$i++){
alert(element[$i].innerHTML);
}
JSFiddle Demo
This question already has an answer here:
Select elements with data attribute *not* using jQuery
(1 answer)
Closed 9 years ago.
Could someone tell me how to write a function: getElementsWithAttributeName("attr-name")?
It should return all elements from the current document that contain the attribute attr-name.
Also, how do I add this function to the document as well?
Any response will be much appreciated.
You can add a method to document just like this:
document.fnName = function(args){ ... };
As Rob W pointed out in the comments, you can just use the existing document.querySelectorAll() method and pass a css selector. If you really wanted this to work like getElementsByAttributeName("attr-name") you could do this:
document.getElementsByAttributeName = function(attrName){
return document.querySelectorAll('[' + attrName+']');
};
Note, this is IE8+ only. (document.querySelectorAll() requires IE9 for CSS3 selectors however.)
references:
MDN: querySelectorAll() docs
CSS-Tricks: The Skinny on CSS Attributes
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);