Jquery Element Usage [duplicate] - javascript

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();

Related

jQuery function on array not working [duplicate]

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(...

Turn '$(this)' jquery to javascript 'this' [duplicate]

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.

Javascript $ notation [duplicate]

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.

JQuery: usage of "this" in an .each() loop [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery each this
I have a loop that iterates over every element of a certain class:
$(".myclass").each(function(i) {
});
I'm trying to get children of that element with this.find("tag"), but it gives me an error. Inside that loop, what, does this refer to? What about $(this)?
this is the raw DOM node. If you want to use jQuery functions on it, you need to use $(this).

How to make $('#some-id') return the same object as getElementById('some-id') [duplicate]

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);

Categories