I have a line of code that uses mootools to get an array of elements with the given selectors
var menuItems = $$('#container .menu');
I need to convert this to jquery but can't find a solution. I have tried jQuery('#container .menu') but it doesn't return an array.
Is there a way to use '.find()' from jquery on the whole document ? (since I don't have a parent element to make it like parent.find()..)
Any other suggestion is also most welcome
With jQuery your statement:
jQuery('#container .menu')
will return a jQuery object that contains all matching elements where you can access the individual DOM elements with array-like syntax:
var menuItems = jQuery('#container .menu');
menuItems.length // gives a count of how many matched
menuItems[0] // the first matching element
// but you can also use jQuery methods on the object
menuItems.hide();
If you want an actual array rather than an array-like object you can use jQuery's .toArray() method:
var menutItemsArray = jQuery('#container .menu').toArray();
Why don't you try one of the jQuery tutorials available at the jQuery website?
If you absolutely need it as an array, rather than working with the jQuery object returned by the selector, take a look at the .toArray() function.
Related
Coming from a jQuery background onto a project using PrototypeJS.
$('someId');
In PrototypeJS will return the element with the given id.
$$('ul.someClass li');
will return the the elements matching the CSS selector, but in a document-ordered array.
How can I run wrap() on the elements in the console, on a single line, since the iterator argument on each() needs to be a function that only takes a collection element and an index.
Use the Enumerable#invoke method to apply your method and arguments to the collection. Just tried the following, and it worked on the first try:
$$('p').invoke('wrap', 'div', {className: 'foo'});
How to can I treat the return value of jQuery functions that would return a bunch of DOM elements. E.g. I'm using the .nextAll() function, that returns a bunch of elements, does it? Can I store the return value in a JS array? Sooner or later I want to iterate through those elements. I know there's the jQuery .each() function that would help me out here. Nevertheless, for training and understanding issues I first want to do it step by step.
I'm pretty sure, this basic question is answered somewhere, but I searched for an answer and did not find anything useful for me. Maybe I didn't find the right words. So please be kind.
jQuery functions typically returns a bunch of DOM elements, it masquerades as an array.
If you run something like:
$('p').css('background-color', 'red');
jQuery will build an array of all p elements, and then applies the css() function to each of them.
If you want a single DOM item, use get with an index:
$( "li" ).get( 0 )
So, .nextAll() also typically returns a number of elements, so it is behaving just like jQuery typically does.
each() is a handy-dandy function that operates on arrays, so it will of course operate just fine on jQuery objects:
$('li + li').nextAll().each(function(i){
//glorious code
});
You could also do this:
var nexts = $('li + li').nextAll();
$.each(nexts, function(i){
//Glorious code!!
});
Hope that makes things clearer!
You can just assign it to a variable:
var $els = $(selector).nextAll();
This way, $els will be a jQuery wrapper (array-like object) of the elements.
If you want to have an array of the elements instead, you can use
var arr = [].slice.call($els);
As the documentation of .nextall() says, it returns jQuery
A jQuery object contains a collection of Document Object Model (DOM)
elements that have been created from an HTML string or selected from a
document. Since jQuery methods often use CSS selectors to match
elements from a document, the set of elements in a jQuery object is
often called a set of "matched elements" or "selected elements".
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().
If I call
$(".myClass")
I get an array of elements. If I now want to get the first element as jquery element I would do something like this:
$($(".myClass").get(0))
So I wrap the DOM-Element, which I get from the array again with the jQuery operator. Is there a more elegant way to do this? Some get method, which returns a jQuery element for example?
Use the eq() method:
$(".myClass").eq(0)
This returns a jQuery object, whereas .get() returns a DOM element.
.eq() lets you specify the index, but if you just want the first you can use .first(), or if you just want the last you can use (surprise!) .last().
"I get an array of elements."
No you don't, you get a jQuery object which is an array-like object, not an actual array.
If you plan to use jQuery much I suggest spending half an hour browsing through the list of all methods.
Or use the each method to traverse.
$(".myClass").each(function () {
console.log($(this).html())
})
$(".item").each (i, elt) ->
$(elt).attr("href")
# ...
Doing $(elt) is necessery to get the jquery object. Is there a way to iterate over a jquery collection, without having to rebuild the jquery object?
Doing $(elt) is necessery to get the jquery object.
Yes.
Is there a way to iterate over a jquery collection, without having to rebuild the jquery object?
No. Because the jQuery object you have is a set of all of the matched elements. To use the jQuery methods on individual elements, you need to get a jQuery object containing just the individual element you want to act on. In a loop, that means wrapping your elt (or this, as both are the same DOM element).
For lots of things, though, you don't need jQuery methods. Your example is one of those things, just use elt.href directly:
$(".item").each (i, elt) ->
var someVar = elt.href;
# ...
The DOM2 HTML spec and the newer HTML5 spec both list lots of reflected properties you can use directly. id, for instance, is one in particular people frequently use. You see $(this).attr("id") a lot where this.id would be sufficient (and more efficient, although it's extremely rare that the efficiency matters).
Yes, cache the jQuery object then select by index.
var $items = $(".item");
$items.each(function(i) {
$items.eq(i).doStuff();
});
I have a string which holds the innerHtml of an object (received via a call to $.html()).
How can I create a jQuery object based on that string?
$(htmlString)
This will hold all of the elements in the string.
If you still have the original jQuery object you called the .html() on, you can access its children directly by using the .children() method:
var $children = $obj.children();
This will return them as jQuery array.
var newelement= $('<div/>');
newelement.html(htmlString);
This differs slightly from SLaks's answer in that it preserves direct text node children. jQuery's $(htmlString) construction shortcut, like many of its features, only deals with Element nodes and not Text nodes.
So if htmlString is 'foo<bar>bof</bar>zot', and you wanted to keep the foo and the zot, you'd have to do it this way.
Similarly with Xion's answer, if you wanted to keep direct text node children, you'd have to use the more-unusual contents() method rather than children().