Is there a way to get JavaScript this from jQuery this?
this == this, whatever this is.
this is a not jquery it is a special, somewhat convoluted, javascript keyword that describes the current scope of execution.
your challenge may be determining or controlling what this is.
There is:
$('a').click(function(){
var jqueryobject = $(this);
var domelement = this;
});
Within such a closure, this always represent the native DOM element which must/can be wrapped into a jQuery object.
If you already got a jQuery object and need to get the DOM element either use
var DOMelement = $(this)[0];
or
var DOMelement = $(this).get(0);
Since jQuery objects are array like objects you can always grab them with standard array access [] notation. The jQuery method .get() will actually do the same. With both ways, you'll receive the DOM element at that array position.
General - what is this ?
this contains a reference to the object of invocation
this allows a method to know what object it is concerned with
this allows a single function object to service many functions
So this is the most important part of all protoypal inheritance things
I don't really understand what you're asking for here, but I'll give it a shot. Firstly, remember that jQuery is just a series of functions written in Javascript. The this keyword is literally the same in "both" contexts.
Perhaps you want to get the actual DOM element instead of the jQuery object? You can use .get():
// let's say there's a single paragraph element
var obj = $('p'); // obj is a jQuery object
var dom = obj.get(0); // dom is a DOM element
Try to access this (DOM element) instead of $(this) (jquery object).
Related
I don't have an issue, but have had times when I got code that didn't work because there was a jQuery object inside another jQuery object.
So I'm just looking for some clarity on the matter. I've looked for answers on this but haven't found anything.
Can we have:
var element1 = $("some-element");
$(element1).addClass("hidden");
Not sure if I'm just stupid (by no means a JavaScript or jQuery expert. I'm still quite junior), but I just wanted to find out what the deal with this is.
you don't need to use like this you can just use this way
var element1 = $("some-element");
element1.addClass("hidden");
you can you jquery object inside jquery object.
I can for example this, hope to have the same idea with your problem
function buildArray(variable){
if (variable.constructor === Array) return variable;
return toArray(variable);
}
So, when i call buildArray function and pass variable parameter, it was Array. I can call member function of Array from buildArray.
Example:
var arr = [1, 2, 3, 4];
var index = buildArray(arr).indexOf(4);
With your question, can jQuery check with $() function.
I am still confused by the question, even with the fiddle..
Correct me if I am wrong, but assigning the name $element1 to a variable would behave no differently than using the name element1. It is simply used as a naming convention (Hungarian Notation) in order to:
distinguish jQuery objects which are stored in variables from
other variables
But using $("#element1") is effectively selecting HTML element(s) for manipulation.
I have modified your Fiddle example, this would be my approach personally (although to be honest, this question is almost a little too broad and open to interpretation).
In majority of JavaScript method(iterator) callback first argument is element and second is index. But in case of jQuery always second argument is element and first one is index. Why they formatted differently? Is that for avoiding confusion between them, since both contains methods like map, filter, etc. Is there any special meaning behind that? I'm just curious to know.
This is because jQuery relies on this; it doesn't need an element iterator.
$('selector').each(function(){
// 'this' refers to unwrapped jQuery selector element; no need for arguments == cleaner code
var $this = $(this);
});
In Vanilla JS, iterators rely on the parameters:
[].forEach(function(el, index){
// 'this' refers to Window object; use the argument
el.querySelector('foo')
});
Because jQuery can utilize the scoped element using this, it doesn't really need the arguments. I'd have to look up the history of the library to even see if the element existed as the second argument in earlier versions.
Is there a best practice, or industry-wide standard for JavaScript naming convention for DOM element?
Take the following example:
var tarzan = document.getElementById('foobar');
What would be the most acceptable name to use so that a DOM element could be differentiated from another type of var? Should it be...
DOM_tarzan
DOMtarzan
elementTarzan
.... so on and so forth?
I want to be able to tell the difference by just looking at the variable. For example, if I see:
DOM_tarzan.remove();
... I know straightaway that "DOM_tarzan" is a DOM element, and that it is employing the standard JavaScript remove() method.
There is no mistaking or guesswork that "DOM_tarzan" is a custom object that has a user-defined "remove()" method.
Thanks.
For indicating that a JS object variable references a DOM element object, I append El (or Elem) as a suffix to the variable name, as in
var tarzanElem = document.getElementById('foobar');
Whether I include jQuery in my projects or not, i like my naming convention of variables to be $variable. Then I can easily see if the variable is a DOM element.
Some objects in javascript can be appended a method to it.
For example we can have Array.prototype.pop = function() {...}
So what I wanna ask is that can we append a method to DOM elements?
Suppose I have the following
var x = document.getElementById("hello");
x.toggle();
How can I append a method called toggle to DOM elements just like what we do in jquery??
Thank you so much.
In concept, you can append functions since DOM elements are Objects after all. In practice, however, you should avoid doing it. Circular references is one of the issues that is related to binding objects to DOM elements which can cause memory "leakage"
What's the jQuery equivalent for each():
$(".element").each(function(){
// do stuff
});
when attaching a function to a single element, like #element ?
You can always reference the jQuery object in a variable:
var $el = $('#element');
...then manipulate it.
$el.doSomething(); // call some jQuery methods from the cached object
$el.doSomethingElse();
If the reason you wanted .each() was to reference the DOM element as this, you don't really need the this keyword to do it, you can simply grab the DOM element out of the jQuery object.
var element = $('#element')[0]; // both of these give you the DOM element
var element = $('#element').get(0); // at index 0
The two of these are equivalent, and will retrieve the DOM element that would be referenced as this in the .each().
alert( element.tagName ); // alert the tagName property of the DOM element
alert( element.id ); // alert the ID property of the DOM element
I'd note that it isn't necessarily bad to use each to iterate over a single element.
The benefits are that you have easy access to the DOM element, and you can do so in a new scope so you don't clutter the surrounding namespace with variables.
There are other ways to accomplish this as well. Take this example:
(function( $ ) {
// Inside here, "this" will refer to the DOM element,
// and the "$" parameter, will reference the jQuery library.
alert( this.tagName );
// Any variables you create inside will not pollute the surrounding
// namespace.
var someVariable = 'somevalue'; // is local to this function
}).call( $('#element')[0], jQuery );
To directly answer your question, .each() operates normally on element sets of any size including 1.
You can also omit the .each() call completely and just call jQuery methods on $('#element'). Remember that you can chain most if not all jQuery method calls as they return the jQuery object. This even works on multiple elements for the matter, depending on what the methods do.
$('#element').doSomething().doSomethingElse();
If you need to reference the object multiple times, make a variable:
var $elm = $('#element');
$elm.doSomething();
doSomethingElse($elm);
Use first().
each() matches all elements, while first() matches only the first.
There are other selectors too. When you use the id in the selector, you will only get one element. This is the main difference between .element and #element. The first is a class that can be assigned to many elements, while the second is an id that belongs to only (at most) one element.
You can still use each if only one (or 0) element is returned. Also, you can skip each altogether if you want to link an event. You use each when you want to execute a specific function for each element in the list of elements.
If there is only 1 element, you can access it normally using the selector.
$('#your_element').your_event(function() {
});
Behind the scenes, each is just a for loop that iterates through each element in the map returned by jQuery.
It is essentially† the same as:
var i, map = $('...selector...');
for (i = 0; i < map.length; i++)
{
someFunction(i, map[i]);
}
† There's more to it than this, involving calling the function in the context of the map element etc.
It's implementation is to provide a convenient way to call a function on each element in the selection.
Do you mean like $('#element').children().each()
supposing you have something like a ul with an id and you want the li each inside it?
If the intention is to call a (non-jQuery) function in a new scope I think using "each" still is a valid (and probably the most elegant) way and it stays true to the jQuery syntax although I agree to Alex, it feels wrong since it might have some overhead.
If you can change the syntax use $('#element')[0] as replacement for this (as already mentioned in the accepted answer).
Btw could someone with enough reputation please correct the comment of "zzzzBov" about the accepted answer?
$('#element')[0] and $('#element').get(0) ARE! the same, if you want the jQuery object use $('#element').first() or $('#element').eq(0)