Skip to content
Closed
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
1afacaa
style conformance for about-jquery/how-jquery-works
Nov 7, 2012
a98b0bf
style conformance for javascript-101/getting-started
Nov 7, 2012
776c4aa
style conformance for javascript-101/syntax-basics
Nov 7, 2012
f7641f4
style conformance for javascript-101/running-code
Nov 7, 2012
87ce1f2
style conformance for javascript-101/types
Nov 8, 2012
74be2db
style conformance for javascript-101/operators
Nov 8, 2012
cc01ee8
style conformance for javascript-101/conditional-code
Nov 8, 2012
2b4cf16
found the section on truthy/falsy
Nov 8, 2012
70b2003
style conformance for javascript-101/loops
Nov 8, 2012
6b04bb6
style conformance for javascript-101/arrays
Nov 8, 2012
0d7b57e
adding links to objects/arrays sections
Nov 8, 2012
f97c941
style conformance for javascript-101/objects
Nov 8, 2012
47fda0e
style conformance for javascript-101/functions
Nov 8, 2012
e498797
style conformance for javascript-101/testing-type
Nov 8, 2012
f1c8aff
link to testing-type section
Nov 8, 2012
2254121
style conformance for javascript-101/this-keyword
Nov 8, 2012
2dfb23a
style conformance for javascript-101/scope
Nov 8, 2012
1cb18ad
style conformance for javascript-101/closures
Nov 8, 2012
4259929
horizontal scrolling issues
Nov 8, 2012
a709de1
consistency with —
Nov 8, 2012
adcbaeb
style conformance for using-jquery-core/dollar-object-vs-function
Nov 8, 2012
bbe819e
style conformance for using-jquery-core/document-ready
Nov 8, 2012
bc6b21c
style conformance for using-jquery-core/avoid-conflicts-other-libraries
Nov 8, 2012
24b91ce
style conformance for using-jquery-core/attributes
Nov 8, 2012
8989211
style conformance for using-jquery-core/selecting-elements
Nov 8, 2012
d8c1ff5
style conformance for using-jquery-core/working-with-selections
Nov 9, 2012
3f9e54a
style conformance for using-jquery-core/manipulating-elements
Nov 9, 2012
947dff6
style conformance for using-jquery-core/data-methods
Nov 9, 2012
b17307b
style conformance for using-jquery-core/utility-methods
Nov 9, 2012
40c11cf
style conformance for using-jquery-core/jquery-object
Nov 9, 2012
96f06d4
style conformance for using-jquery-core/traversing
Nov 9, 2012
a52fe58
style conformance for using-jquery-core/css-styling-dimensions
Nov 9, 2012
6256c9e
style conformance for using-jquery-core/iterating
Nov 9, 2012
8f96503
style conformance for using-jquery-core/understanding-index
Nov 9, 2012
e512536
deleting obsolete exercises.md page
Nov 9, 2012
d6d5dcb
Update config-sample to reflect local.* instead of dev.*
ajpiano Nov 9, 2012
4ae27eb
Upgrade to grunt-jquery-content 0.5.10, add grunt-check-modules to gr…
ajpiano Nov 9, 2012
495a7b0
README.md updates
ajpiano Nov 9, 2012
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
style conformance for using-jquery-core/understanding-index
  • Loading branch information
jorydotcom committed Nov 9, 2012
commit 8f965036060942d831ac82be8e375e39030ac7b8
34 changes: 14 additions & 20 deletions page/using-jquery-core/understanding-index.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
---
title : using jQuery's index() function
title : Using jQuery's .index() Function
level: intermediate
source: http://jsfiddle.net/johnkpaul/SrHDh/
attribution:
- John Paul
---
## .index()
`.index()` is a method on jQuery objects that's generally used to search for a given element within the jQuery object that it's called on. This method has four different signatures with different semantics that can be confusing. This article covers details about how to understand the way `.index()` works with each signature.

`index()` is a method on jQuery objects that is generally used to search for a given element within the jQuery object that it is called on. This method has four different signatures with different semantics that can potentially cause confusion. This chapter will describe the details for how to understand how `.index()` works with each signature.

### `index()` with no arguments
## `.index()` with No Arguments

```
<ul>
Expand Down Expand Up @@ -37,13 +38,11 @@ console.log( "Index: " + $div.index() ); // 4

console.log( "Index: " + $div.last().index() ); // 4
```
[jsFiddle demo](http://jsfiddle.net/johnkpaul/SrHDh)

In the first example, `index()` gives the zero-based index of `#foo1` within it's parent. since `#foo1` is the second child of it's parent, `index()` returns 1.
In the first example, `.index()` gives the zero-based index of `#foo1` within its parent. Since `#foo1` is the second child of its parent, `index()` returns 1.

The first potential confusion comes from the other examples in this fiddle. When `index()` is called on a jquery object that contains more than one element, it does not calculate the index of the first element, as I would have expected, but rather calculates the index of the last element. This is equivalent to always calling `$jqObject.last().index();`
Potential confusion comes from the other examples of `.index()` in the above code. When `.index()` is called on a jQuery object that contains more than one element, it does not calculate the index of the first element as might be expected, but instead calculates the index of the last element. This is equivalent to always calling `$jqObject.last().index();`.

### `index()` with a string argument
## `.index()` with a String Argument

```
<ul>
Expand Down Expand Up @@ -71,13 +70,11 @@ var $div = $("#last");
console.log( "Index: " + $div.index("div") ); // 2
```

[jsFiddle demo](http://jsfiddle.net/johnkpaul/D29cZ/)

When `index()` is called with a string argument, there are two things to consider. The first is that jQuery will implicitly call `.first()` on the original jQuery object. It will be finding the index of the first element, not the last element in this case. This inconsistency always makes me stop and think, so be careful with this one.
When `.index()` is called with a string argument, there are two things to consider. First, jQuery will implicitly call `.first()` on the original jQuery object. It will be find the index of the first element, not the last element in this case. This is inconsist, so be careful here.

The second point is that jQuery is querying the entire dom using the passed in string selector and checking the index within that newly queried jQuery object. For example, when using `.index("div")` in the last example, jQuery is selecting all of the divs in the document, and then searching for the index that contains the first element in the jquery object that `.index()` is called on.
The second point to consider is that jQuery is querying the entire DOM using the passed in string selector and checking the index within that newly queried jQuery object. For example, when using `.index("div")` in the last example above, jQuery is selecting all of the `<divs>` in the document, then searching for the index that contains the first element in the jQuery object `.index()` is called on.

### `index()` with a jQuery object argument
## `.index()` with a jQuery Object Argument

```
<ul>
Expand Down Expand Up @@ -105,11 +102,8 @@ console.log( "Index: " + $tests.index($bar) ); // 1
console.log( "Index: " + $tests.index($bar.first()) ); // 1
```

[jsFiddle demo](http://jsfiddle.net/johnkpaul/QZv7y/)


In this case, the first element of the jQuery object that is passed into `.index()` is being checked against all of the elements in the original jQuery object. The original jQuery object, on the left side of `.index()`, is array-like and is searched from index 0 through `length - 1` for the first element of the argument jQuery object.

### `index()` with a DOM element argument
## `.index()` with a DOM Element Argument

In this case, the DOM element that is passed into `.index()` is being checked against all of the elements in the original jQuery object. Once all of the other cases are understood, this should be the simplest case. It is very similar to the previous case, except since the DOM element is passed directly, it is not taken from a jQuery object container.
In this case, the DOM element that's passed into `.index()` is being checked against all of the elements in the original jQuery object. Once all other cases are understood, this should be the simplest case. It is very similar to the previous case, except since the DOM element is passed directly, it is not taken from a jQuery object container.