We Keep Coding

find element from another jquery element

I'm not able to find element from my another jquery element.
Could you please suggest, what I'm doing wrong here?
I have following JS code and I want to find that from total_panels which div has wcPanelTabActive class.
var total_panels = $el.find('.wcPanelTab'),
active_panel = total_panels.find('.wcPanelTabActive');
Chrome console:

You need to use .filter(). As .filter() reduces the set of already matched elements, whereas .find() gets descendants of the matched element.
active_panel = total_panels.filter('.wcPanelTabActive')

Why the first element of the return value of the jQuery empty() function is the element itself?

I saw a code as bellow in a javascript function:
A.empty()[0].options.add(new Option('', ''));
and A is a dom select element. It seems A.empty()[0] is refering to the same select element. This means that empty returns an array whose first element is the dom object itself (i.e, A here).
Can somebody explain this behavior or link me somewhere I can read about this behaviour? (Or I completely misunderstood this code!?)
update: looking at the API documentation here does say the return value is a jQuery. Is this the expected behavior of the jQuery functions that their return value's first element is always the element the function is called upon (given the return value is of type jQuery)?

The empty() method removes all child nodes and content from the selected elements.
and adding option to that select element with a blank ''.

empty() just removes any child nodes and returns the original element.
[0] just returns the first DOM element in the collection. jQuery objects contain an "array-like" collection of HTML elements.
Followup:
jQuery objects are always a collection of 0 or more HTML elements. This is one of the best features of jQuery and allows code to be written that does not fall over when there are no matching elements (although accessing [0] will fall over if you try to access a property when the jQuery object has 0 length, but [0] is a non-jQuery way of doing things).

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)

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