if i use this $("div:jqmData(role='page')") it will return me the array of pages in my DOM object. But jquerymobile creates a default blank page which doesnt have any ID so i cant actually get it by its ID. instead i use $("div:jqmData(role='page')").get(0) to get the first DOM object representing the default Page jquery created.
but if i use $("div:jqmData(role='page')").get(0).remove() it doesnt remove the page, but it returns errors.
can anyone teach me on how to remove that DOM? thanks!
.remove() is a jQuery method, so you need a jQuery object to call it on. .get returns a DOM element though. Use .eq [docs] instead to get the element as jQuery object:
$("div:jqmData(role='page')").eq(0).remove()
The .get() function returns the DOM element itself, so you won't be able to chain jQuery functions (such as .remove()) after it. If you need to do that, use the .eq() method which returns that single DOM element wrapped in a jQuery object, allowing you to chain.
It doesn't work because .get() returns the underlying DOM element, not the jQuery object. You can use .eq() to access the jQuery object at a specific index.
So this should work:
$("div:jqmData(role='page')").eq(0).remove()
Related
When I add a class on the following object, everything is fine:
$('.select').on('click', function() {
$(this).addClass('active');
});
But when I try to add a class to a child, I get an error:
$('.select').on('click', function() {
$(this).find('.list')[0].addClass('active');
});
From my research I've learned that certain objects have specific methods that can be called on them. So there must be a difference between
$(this)
and
$(this).find('.list')[0]
But I can't figure out what the difference would be, and I don't know how to find that out.
The difference is that $(this)is a jquery object, while $(this).find('.list')[0] is a DOM element, and doesn't have functions and methodsprovided by jQuery.
Because calling $(this).find('.list') will give you a nodeList and when you call [0] you will get the first node object from this list, and a node or a DOM element is different from a jquery object, as jQuery wraps a DOM elemnt with its utility methods and attributes.
So what you need to do is to convert this DOM element to a jQuery object so you can call jQuery methods on it:
$($(this).find('.list')[0])
$(this).find('.list')[0] returns a dom element from the jQuery object.
Elements don't have an addClass() method and you should be seeing an error in browser console telling you that
If you want the first one you can use first() or eq()
$(this).find('.list').first().addClass('active');
// OR
$(this).find('.list:first').addClass('active');
// OR
$(this).find('.list').eq(0).addClass('active');
I have read the JQuery documentation, and while much attention is devoted to what you should pass the function, I don't see any information on what it actually returns.
In particular, does it always return an array, even if only one element is found? Does it return null when nothing is found? Where is this documented?
I understand that jquery methods can be applied to the return value, but what if I want to just use the return value directly?
From Rick Strahl's description:
The jQuery Object: The Wrapped Set:
Selectors return a jQuery object known
as the "wrapped set," which is an
array-like structure that contains all
the selected DOM elements. You can
iterate over the wrapped set like an
array or access individual elements
via the indexer ($(sel)[0] for
example). More importantly, you can
also apply jQuery functions against
all the selected elements.
About returning nothing:
Does it always return an array? Does it return null?
You always get the same thing back, whether or not it has any contents is the question. Typically you can check this by using .val() (e.g. $('.myElem').val())
It doesn't return an array, it returns a jQuery object. The jQuery object is what contains all the special jQuery methods.
It never returns null, or another type. If one element is found, the jQuery object will have only one child. If no elements are found, the jQuery object will be empty.
As another answerer mentioned, it always returns the jQuery object.
This object always contains an array of elements (even if it is an empty array, or an array with just one object).
If you'd like to use the returned object "directly", as in, as a plain element, you can do one of the following:
$('selector')[0] // element
$('selector').get(0) // element
$('selector').length // number of elements in the array
The jQuery function (i.e. "$") always returns a jQuery object in every instance.
From the jQuery documentation:
The jQuery object itself behaves much like an array; it has a length property and the elements in the object can be accessed by their numeric indices [0] to [length-1]. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as join().
The fact that $() always returns the jQuery function lets you chain jQuery function calls judiciously.
Jquery selector mechnism
$("..") , the jquery selector, is used to select matched elements.
Return value
It always return an array-like jquery object, which has a length property,
Call method on returned jquery object
Methods of jquery could be called on the object, and apply to those selected elements,
Access original element by index
The selected elements, are store as property of the object, their property name are index numbers start from 0,
thus could be accessed by index, start from 0,
after get the original element, you can treat it as if get by document.getElementXxx().
Wrap an original element to a jquery object
After get the original element, you can wrap it to be a jquery object, by calling $(originalEle),
then you can call jquery methods on the wrapped object.
According to firebug, it returns an array of objects that match to your selector. But this array is a jQuery object, that more methods than a simple Array.
Their documentation lists a few of the core calls you can use with "$" and what they return
I was poking around the source code of a website when I came across some code like this:
$($('#newForm_step1')).hide("slide", { direction: "left" }, 0);
and this:
$($($('.breadcrumbs')[0]).children().last()).html("...");
I've never seen the $ (jQuery) function used this way, and I was wondering if there'd be any practical reason to do something like this? To the best of my knowledge, wrapping a jQuery object with a call to $ simply returns a jQuery object for the same selector, and methods on jQuery objects return this, so I don't see why one would need nested calls to $.
No, there is no reason to do this.
In the first example, $($(...)) is redundant. There is absolutely no effect in immediately wrapping a jQuery object in another jQuery object.
The line should read
$('#newForm_step1').hide("slide", { direction: "left" }, 0);
In the second example, $(...)[0] returns a raw DOM element, so it's wrapped again before having jQuery's .children().last() invoked on it. The result of that is already a jQuery object, so there is no need to re-wrap it, and the "unwrapping" could have been avoided by calling .first() instead of [0].
The line should read
$('.breadcrumbs').first().children().last().html("...");
There's no necessary to wrap jQuery object with jQuery. That will just result the same but over-coding and redundant.
But when you have DOM Object then you need to wrap with jQuery so that it will be jQuery object.
Taking your example:
$('.breadcrumbs')[0];//[0] converts to JavaScript Object
Now, if you want to work with jQuery again, you may then wrap with jQuery:
$($('.breadcrumbs')[0]);//is now a jQuery Object
But with this example is unnecessary because you can do just like this:
$('.breadcrumbs:eq(0)');//selects first .breadcrumbs element
However, if you have some DOM Object rather than jQuery object then you need jQuery wrapper to work with jQuery methods.
You must remember this:
JavaScript Object needs JavaScript methods to be chained:
javascriptObject.javascriptMethods
Ex-
$('.breadcrumbs')[0].addEventListener();//javascript addEventListener method
jQuery Object needs jQuery methods to be chained:
jQueryObject.jQueryMethods
Ex-
$('.breadcrumbs').on();//jQuery on method
I can't understand the difference between $("") and $.find(""). They behave differently when nothing is matched but you try to do something with the result (like call toggle()).
$("").toggle(); // No error
$.find("").toggle(); // An error
$("body").find("").toggle(); // No error!
$($.find("")).toggle(); // No error
Why? :-)
In my context I have a function that uses $ to search for elements globally and has no problems when nothing matches. Now I want to allow the function to search only inside specified element (wrapped in a jQuery object). But it still should work if I pass $ itself.
$.find("") returns an empty array so it throws an error when you use [].toggle() as array has no toggle method.
And wrapping it inside jQuery i.e. $ like $($.find("")) returns an empty object Object[] and using toggle() in jQuery object won't throw an error.
$.find is internal CSS selector engine (Sizzle) and the function returns just and array of found elements. It's not jQuery instance and hence doesn't have jQuery prototype methods like toggle. (Thanks #dfsq)
There's no shorthand method $.find for find in jquery
This is what the official jQuery doc has to say about .find method:
Get the descendants of each element in the current set of matched
elements, filtered by a selector, jQuery object, or element.
The difference between $.find("") and $("").find("") is:
$.find begins traversing the DOM from the very top of the DOM tree, whereas $("").find start traversing the DOM from the specified DOM element and tries to find it's children.
Actually, toggle is a jQuery function which is only available within a jQuery object BUT $.find() does not return a jQuery object instead it returns vanilla JavaScript object. Hence the error.
Whereas any jQuery selector will return a jQuery object hence, if you convert this $.find to jQuery object then it works.
You can try the following code to check if an object is jQuery object or not.
$("#mainbar") instanceof jQuery
//Output: true
$.find("#mainbar") instanceof jQuery
//Output: false
$($.find("#mainbar")) instanceof jQuery
//Output: true
See official jQuery documentation, which states:
Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements (…)
So in other words, .find() only works correctly when you want to find something inside already selected elements.
I'm trying to use this: http://api.jquery.com/jQuery.get/ and I don't understand why the examples look like this:
$.get("test.php");
I've never seen the syntax $.get ? Why wouldn't I do something like
$jQuery = new JQuery();
$jQuery.get(...);
The $ symbol (equivalent to jQuery) is not a constructor, it's a function and an object. As such, there is no need to use new on it.
$('css selector').get() returns an array of dom elements that the selector matched.
$.get() does an HTTP GET request
The $ variable is created by jQuery and is the same as the jQuery function / object.
You're thinking of jQuery's instance methods, which operate on jQuery objects that contain DOM elements.
$.get is essentially a static method, since it doesn't operate on a set of DOM elements.
There would be no point in calling it on a jQuery set instance, so it is called without one instead.
$ or jQuery is an object, that allows you to use some methods like get.
The new keyword is usually used with a function that acts like a class. The new keyword sets this to the variable name you assign it.
There is no reason why you would need another jQuery object (except when you want to use another libary, but there is jQuery.noConflict). All you need is in the jQuery object.
It's simple - jQuery automatically creates the variable $ pointing at at jQuery when it's first loaded.
Hence:
$.get(...);
is example the same as:
jQuery.get(...);
If you don't want $ to point at jQuery (perhaps because it's also being used by another library), look at $.noConflict()