We Keep Coding

Get the offset position of a table using its index with jQuery

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)

jQuery using .toggle() to toggle a single element

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

How to getElementByID in a specific DIV block (JS or JQUery)

I just wanted a fast/easy/simple way to check for existing ID on a specific element (div in this case)..
Can't seem to find code sample for this..im using jquery but i dont think i need to do jquery on this one, just basic getElement.. but i need to isolate the search inside a div block.. because the id does exist in other elements on the page but i need to know if it exist in a specific area/div.
so instead of just
document.getElementById(target_id);
i need something like:
divName.getElementById(target_id);
or
$("document.divName").getElementById(target_id);
or
$(".divName").document.getElementById(target_id);
Can't seem to find something that works.

IDs are supposed to be unique and no two elements in page should have same id. You may search some element with some class in div with specific ID.
$('#divId .someClass')
or using find()
$('#divId').find('.someClass')
or using context, jQuery( selector [, context ] )
$('.someClass', $('#divId'))

var mySubDiv = myParentDiv.querySelector("#mySubDivId")
is equivalent to
var mySubDiv = document.querySelector("#myParentDivId #mySubDivId");
// don't forget the space : #myParentDiv#mySubDivId won't work
where querySelector and querySelectorAll are very useful functions, enough for me to avoid using jQuery : they accept any css selector
in real life, using the same Id for different DOM elements often happens.

id's should be unique, you can check for element using:
$(".your_parent_div").find("div#some_unique_id");

you can use it for the getElementsByTagName or ClassName, but ID is unique over document. so doesn't need to do that. better to use a special ID.
and in every id define as a element in javascript and you can just write id's name and use it, like this :
ID.style.color = red;

According to my understanding on your question, You have used two id's with same name when u execute, It takes only first ID so you are asking to take id from the specific div, well that is bad type of coding to use two id for same name instead go for class if want to use same name.
solution for your question is -this ->
var someDiv = document.getElementsByClassName("divName");
var someId = someDiv[0].getElementById("target_id");

Break up a form with jQuery?

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

jQuery: Get one of a set of selected elements

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