jQuery: .each how to reference matched object - javascript

how do i get a reference to the element that matched? 'this' is not correct.
For example here I am trying to alert with the elements value.
//how do i get this to reference the object it matches.
$("#txtFirstName,#txtLastName,#txtDOB").each(
function() { alert(this.val()); }
);

Try:
$("#txtFirstName,#txtLastName,#txtDOB").each(
function() { alert( $(this).val() ); }
);

It is this, but to use val() you need a jQuery object.
$(this).val();

In that context this is a reference to the actual DOM element. You will need to wrap that into a jQuery object in order to use the val() function.
$(this).val()

Related

Using javascript "this" for jquery selector

In this code, we can obtain value of element id as 2 differnt way and both way return resultat
$("#my_div").on("click", function () {
alert( $(this).attr("id") );
alert( this.id );
});
But i interest, second way, is it proper in this case? I ask this, because in code we use jquery selector and for jquery selector, write clear javascript: this is justified and will it work always? or may be better use jquery $(this) for jquery selector? or not differnce?
this.id will give you the internal DOM element property while $(this).attr("id") returns the value of 'id' attribute.
The alternative to this.id in jQuery is using prop() method: $(this).prop("id"). However, using pure this.id construction will be easier and faster.
The main jQuery constructor can take a number of different types of argument.
In that context, this is not a selector, it is an HTMLElementNode (which jQuery calls an element).
This is perfectly OK and documented.
There is no need to spend the resources in wrapping an element in a jQuery object if you are just going to grab its ID. There aren't any compatibility problems between browsers for that.
Grabbing the id property of an HTMLElementNode takes less code and is faster then wrapping the whole thing in jQuery.
Yes, your second way is proper.
$("#my_div").on("click", function () {
// this is available within this function
alert( this.id );
});
this refers to an HTMLDOMElement within the function, and wrapping that this within $() will give you an jQuery object.
If you define another function within the click handler. Ex:
$("#my_div").on("click", function () {
// keep reference of this
var that = this;
function test() {
// this will not available here directly
// instead of that you can use reference
alert(that.id);
}
});
And $(this).attr('id'), this.id or $(this).prop('id') will give you the same result.
For choosing the best method is not always clear.
In this case you want the this.id, because the other solution requires much more calls behind the scenes (obvious calls to jQuery and attr).
If you need more information that mite differ from browser, you want the jQuery way.

Check if 'this' is $(this) or just plain old 'this'

I have one function:
function myFunction(){
var id = $(this).attr('id');
}
Now sometimes, myFunction gets called with $(this) as the context but sometimes the context is just 'this'.
In one line how can I do something similar to this:
if(this == $(this)){
var e = $(this);
}
Basically a test to see if 'this' is a jQuery 'this' or a JS 'this'.
Possible?
if (this.jquery) { // refers to jQuery version
// jQuery object
}
Alternatively:
if (this instanceof jQuery) { // prototype chain
// jQuery object
}
However, as others have said, it doesn't really matter, $(this) will work whether or not this is already a jQuery object or a DOM element.
You can also just do var e = $(this) when this is a jQuery object or if it's not.
One way to deal with it would just be to always wrap it in $(...). Wrapping a jQuery object like that creates a clone (see the jQuery docs), so this HTML:
Test Link​​​​​​​​​​​​​​​​​​​​​​​
with this JS:
​var link = $('#test-link');
var doubleWrappedLink = $(link);
alert(doubleWrappedLink.attr('href'));​​​​​​​
will correctly pop up "test".
You can use the following snippet:
if (obj instanceof jQuery || 'jquery' in Object(obj)) { }
Take a look at: Check if object is a jQuery object

why is jQuery selector property undefined within each()?

Given the following code, why does the selector property work in the first instance but not the second? Aren't they both jQuery objects?
<span class='tst'>span</span>​
var tst = $('.tst');
console.log(tst.selector);
// prints '.tst'
$('.tst').each(function() { console.log(this.selector);});
// prints undefined​​​​​​​
this, in the context of the .each() loop, is not a jQuery object, so the selector property is undefined.
You need to make it a jQuery object first: $(this).selector
However, it should be noted that the selector property will return an empty string while inside the .each() loop.
Edit
If you absolutely need the selector property within the .each(), one option would be to cache your selector:
var cached = $('.tst');
cached.each(function() {
console.log(cached.selector); // Will display ".tst"
});
​
this != $(this)
In your first case tst is a reference to the jQuery object, but in the second this is simply the corresponding DOM element.
Within an .each() loop the .selector property is not available, however. To access '.tst' you can do $(this).attr("class") (when you use a class selector) -- though if you already use it in the each you can just cache it in a variable before hand.
Note that this will return all of the classes for that elements, so you can parse it later if it has more than one.
The best workaround based on your exact description is this:
var $tst = $(".tst");
$tst.each(function() {
console.log($tst.selector); //prints .tst
});
However I can't see any reason why you really need to do this.
Working Demo http://jsfiddle.net/wA6Yv/ or http://jsfiddle.net/a3CYR/2/
this != $(this)
If you keen: jQuery: What's the difference between '$(this)' and 'this'?
code
var tst = $('.tst');
console.log(tst.selector);
// prints '.tst'
$('.tst').each(function() {
alert($(this).text());
});
// prints undefined

How to iterate through jQuery elements

I want to be able to see what's inside the tags that jQuery finds. How come the following doesn't work?
$("div.UIImageBlock_Content.UIImageBlock_ICON_Content").each ( function() {
alert(($this).html);
});
What's the right way to do this?
$this => $(this)
.html => .html()
So this should do it:
$("div.UIImageBlock_Content.UIImageBlock_ICON_Content").each ( function() {
alert($(this).html());
});
Note that html() function just uses the innerHTML property, so it can be a lot simpler:
$("div.UIImageBlock_Content.UIImageBlock_ICON_Content").each ( function() {
alert(this.innerHTML);
});
The current element within a jQuery each iteration can be accessed via this (not $this).
There's a small caveat, however: the this in a jQuery iteration refers to each element's underlying DOM object, not the jQuery object. You can use this code, then:
$("div.UIImageBlock_Content.UIImageBlock_ICON_Content").each ( function() {
alert(this.innerHTML);
});
You don't need to build a jQuery object from the raw DOM object on each iteration — an element's inner HTML is already present in the DOM object, and there's no need for extra work.

value in .each() loop

when i use jQuery .each() function, it is give me index and value of current element.
I have a this code
$('.scrollbar').each(function (index, value) {
//some code
});
the value is an DOM or jQuery object
It's the underlying DOM object. It's easy to be proven:
$('.scrollbar').each(function(index, value) {
alert(value.jquery);
});
shows undefined.
Whereas:
$('.scrollbar').each(function(index, value) {
alert($(value).jquery);
});
shows the version of jQuery which is attached to all jQuery objects.
You can also use this:
$('.scrollbar').each(function (index, value) {
var DOM = this,
jq = $(this);
});
The value refers to the same object as the this object, so it will be the DOM object.
It is a DOM object. To get the jQuery object you can use $(value).
It refers to the current DOM element that your Jquery function is reffering to...
In this case your DOM element which has a class of .scrollbar is currently referred to...
As niels says, use "this" pointer to access the current DOM element.
Hope this helps :)

Categories