Home > Developer > JavaScript
Example of using the index () method in jQuery, jqueryindex
This document describes the usage of the index () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method searches for matching elements and returns the index value of the elements.
The index value starts from 0.
Syntax structure 1:
When this method has no parameters, the return value is the index position of the specified element in its peer element set.
Copy codeThe Code is as follows: $ (selector). index ()
Instance code:
Instance 1:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> index () function-helper's house </title>
<Style type = "text/css">
Span {
Color: red;
}
</Style>
<Title> helping customers </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn"). click (function (){
$ ("Span"). text ($ (". qian"). index ());
})
});
</Script>
</Head>
<Body>
<Div>
<Ul>
<Li> background area </li>
<Li class = "qian"> foreground area </li>
<Li> database zone </li>
<Li> webmaster communication </li>
</Ul>
</Div>
<Div> current li element position: <span> 0 </span> </div>
<Button id = "btn"> click to view the result </button>
</Body>
</Html>
The code above can return the index value of the li element with the class name qian In its peer element set. You may have this question: is the peer element similar to the other element, that is, the index value of the li element in the li element set.
Example 2:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> index () function-helper's house </title>
<Style type = "text/css">
Span {
Color: red;
}
</Style>
<Title> helping customers </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn"). click (function (){
$ (". Index"). text ($ ("# sou"). index ());
})
});
</Script>
</Head>
<Body>
<Div>
<Ul>
<Li> background area </li>
<Li id = "qian"> foreground area </li>
<Li> database zone </li>
<Li> webmaster communication </li>
<Span id = "sou"> Search Optimization </span>
</Ul>
</Div>
<Div> current li element position: <span class = "index"> 0 </span> </div>
<Button id = "btn"> click to view the result </button>
</Body>
</Html>
From the code above, we can see that it is not just similar elements, but all peer elements.
Syntax structure 2:
When the method parameter is a DOM object or jQuery object, the returned value is the index of the DOM object or jQuery object in the specified Element Set.
If the specified DOM object or jQuery object cannot be found in the specified Element Set, the returned value is-1.
Copy codeThe Code is as follows: $ (selector). index (element)
Parameter List:
| Parameters | Description |
| Element | Obtain the DOM object or jQuery object at the index position. |
Instance code:
Instance 1:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> index () function-helper's house </title>
<Style type = "text/css">
Span {
Color: red;
}
</Style>
<Title> helping customers </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn"). click (function (){
$ ("Span"). text ($ ("li"). index (document. getElementById ("qian ")));
})
})
</Script>
</Head>
<Body>
<Div>
<Ul>
<Li> background area </li>
<Li id = "qian"> foreground area </li>
<Li> database zone </li>
<Li> webmaster communication </li>
</Ul>
</Div>
<Div> current li element position: <span> 0 </span> </div>
<Button id = "btn"> click to view the result </button>
</Body>
</Html>
Example 2:
Because no matching element is found, the returned value is-1.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> index () function-helper's house </title>
<Style type = "text/css">
Span {
Color: red;
}
</Style>
<Title> helping customers </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn"). click (function (){
$ (". Index"). text ($ ("li"). index (document. getElementById ("sou ")));
})
});
</Script>
</Head>
<Body>
<Div>
<Ul>
<Li> background area </li>
<Li id = "qian"> foreground area </li>
<Li> database zone </li>
<Li> webmaster communication </li>
<Span id = "sou"> Search Optimization </span>
</Ul>
</Div>
<Div> current li element position: <span class = "index"> 0 </span> </div>
<Button id = "btn"> click to view instances </button>
</Body>
</Html>
Syntax structure 3:
When the method parameter is a selector, the elements are searched from the object set obtained through this selector.
Copy codeThe Code is as follows: $ (selector). index (Jqselector)
Parameter List:
| Parameters | Description |
| Jqselector | Selector, which searches for elements from the objects obtained through this selector. |
Instance code:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> index () function-helper's house </title>
<Style type = "text/css">
Span {
Color: red;
}
</Style>
<Title> helping customers </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn"). click (function (){
$ (". Index"). text ($ ("# qian"). index ("li "));
})
});
</Script>
</Head>
<Body>
<Div>
<Ul>
<Li> background area </li>
<Li id = "qian"> foreground area </li>
<Li> database zone </li>
<Li> webmaster communication </li>
<Span id = "sou"> Search Optimization </span>
</Ul>
</Div>
<Div> current li element position: <span class = "index"> 0 </span> </div>
<Button id = "btn"> click to view instances </button>
</Body>
</Html>
The above code obtains the index position of the li element with the id value of qian in the li object set through the li selector.
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
