I have two tables in a page. And i print their top co-ordinates using jQuery's $.offset().top.
$("table").offset().top
prints the first table offsets. Doesn't $("table") select all the tables? How does it print just the first table's co-ordinates?
And when i try to print the second table's offset position using $("table")[1], it says $("table")[1].offset is undefined
Jsfiddle link is at,
http://jsfiddle.net/JfGVE/805/
Note: I can get the results using table's id but i am looking for a solution that uses table's index to get its offset
You can't use jQuery methods on DOM elements.
A jQuery object contains DOM elements, and you were trying to use the jQuery method .offset() on one of the DOM elements in the jQuery object.
Use the .eq() method in order to access a jQuery object by its index instead:
$("table").eq(1).offset().top;
(As a side-note, the .eq() method's index is zero-based, so .eq(1) is the second element.)
It's also worth mentioning that you can wrap the DOM element $("table")[1] with $() in order to use it as a jQuery object:
$($("table")[1]).offset().top
jquery docs for offset():
Get the current coordinates of the first element in the set of matched
elements, relative to the document.
says it all
You can either iterate over the tables and store their offset in an array. When you access the table as $("table")[1], it becomes a javascript object. In order to get the offset for this element you can use any of the following:
$("table").eq(1).offset().top
or
$($("table")[1]).offset().top
This is because .offset() is a jquery function and not a javascript funtion.
You can use .eq() instead.
console.log("the first table offset is " +$("table").eq(1).offset().top)
Related
So I want to toggle a single element in an array of elements how can I do this?
What I have tried
$(".classname")[1].toggle()
The problem with that is that you are getting the element rather than a jquery object. Try this:
$(".classname").eq(1).toggle()
Also, I assume you are looking for the 2nd element using index 1
Try this :
$('.classname').eq(0).toggle()
When using [], you are losing jquery reference and the object become a dom element. DOM element are used with Javascript. Example :
$('.classname')[0].id //will work since .id is a DOM attribute
$('.classname').eq(0).id //will not work since it's a jQuery object
Here the jQuery .eq() information page.
Elements are based on a 0 index, wich mean 0 = first element, 1 = second element and go on
I'm trying to access the id of the element nextElementSibling in the array presented in the picture below:
items[3].item.nextElementSibling.attr('id'))
This query does not work. Whereas I can access the id of the item element like so:
items[3].item.attr('id'))
Can someone explain me why the second works, whereas the first does not work!?
Thanks for your help!
.attr() is a jQuery function, but you are not testing it on a jQuery object ($()). Just get its id directly with normal JavaScipt:
items[3].item.nextElementSibling.id
Or wrap it in $() to access jQuery functions:
$(items[3].item.nextElementSibling).attr('id')
I have a stack of divs that belong to a specific class, say tabs. and the semantic structure looks something like this:
<div class = "tabs" >_______</div>
<div class = "tabs" >_______</div>
<div class = "tabs" >_____</div>
It's easy to access the first and the last element of the div like
$('.tabs:first') or
$('.tabs:last')
but getting to the 2nd (and assuming there are multiple other divs inside then the all divs other than first or last) seems to yield a syntax error to me such as :
$('.tabs:second') or $('.tabs:third') do not work expectedly.
Can anyone pinpoint what is wrong here?
Try using the eq() selector, notice the index is zero-based:
$(".tabs:eq(1)");
There are two ways to do this, either using the .eq() method or the :eq() selector.
The .eq() method:
The way the jQuery documentation recommend you do this is by making use of the .eq() method.
// eq() is zero-based, so this would get the second element
$('.tabs').eq(1)
A handy feature is that .eq() also can take a negative number, which causes the function to start from the end instead.
// This would take the second element from the end
$('.tabs').eq(-2);
The :eq() selector
jQuery also provide an :eq() selector, that basically work the same way the .eq() method does. So you could do this as well:
$('.tabs:eq(1)')
Notice that even though this work, it is preferred to use the .eq() method instead of the selector. The method has better performance in modern browsers and the :eq() selector does not support negative numbers, so it is somewhat more limited.
Take a look at the jQuery :first selector documentation:
http://api.jquery.com/first-selector/
You'll notice that this is a jQuery extension and not part of the CSS specification.
Also that :first is equivalent to :eq(0), that means if you want to get the second element, you can do it with :eq(1).
If you don't need a filter in the CSS selector, you can simply get the element with the .eq method like this:
$('.tabs').eq(0) // get the first element
$('.tabs').eq(1) // get the second element
$('.tabs').eq(2) // get the third element
$('.tabs').eq(-2) // get the second to last element
$('.tabs').eq(-1) // get the last element
I have a form, which I want to iterate through. I want to show one fieldset at a time, and then show a "next" and "back" button to go to the next section.
I'm assuming that I start with $('fieldset'); but how do I access individual elements thereafter?
$("fieldset")[i] does not seem to work.
How would I accomplish that with jQuery?
I don't necessarily recommend this, but:
$($('.fieldset')[i]).css(...)
Should work.
If you wrap each call to $('.fieldset')[i] in a new JQuery selector, you create a new JQuery object out of that single item. JQuery objects have the method css that you want. Regular dom objects do not. (That's what you get with $('.fieldset')[i])
From the jQuery documentation:
How do I pull a native DOM element from a jQuery object?
A jQuery object is an array-like
wrapper around one or more DOM
elements. To get a reference to the
actual DOM elements (instead of the
jQuery object), you have two options.
The first (and fastest) method is to
use array notation:
$('#foo')[0]; // equivalent to
document.getElementById('foo') The
second method is to use the get
function:
$('#foo').get(0); // identical to
above, only slower You can also call
get without any arguments to retrieve
a true array of DOM elements.
To get a jQuery wrapper back around the DOM element you just extracted, rewrap it like so:
$( $('#foo')[0] ) //now it's ajQuery element again.
$("fieldset").each(function() {
// code, applied for each fieldset
})
There are several elements that are selected by $(".foo"). $(".foo").text() returns the text of each element concatenated together. I just want the text of one element. What is the best way to do this?
$(".foo")[0].text() fails.
You want to use .eq(0), like this:
$(".foo").eq(0).text()
When you do $(".foo")[0] or $(".foo").get(0) you're getting the DOM Element, not the jQuery object, .eq() will get the jQuery object, which has the .text() method.
Normally using the # selector syntax selects one element by id attribute value. Do you have more than one element with the same id attribute value? If so, then you need to correct your HTML. id attribute values should be unique within a document.
The items in the jQuery array always return the dom elements (not the jQuery wrapped elements). You could do something like:
$($("#foo")[0]).text()