Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events
  • jQuery Effects
  • jQuery Traversing
  • jQuery HTML & CSS
  • jQuery AJAX
  • jQuery Properties
  • jQuery Examples
  • jQuery Interview Questions
  • jQuery Plugins
  • jQuery Cheat Sheet
  • jQuery UI
  • jQuery Mobile
  • jQWidgets
  • Easy UI
  • Web Technology
Open In App
Next Article:
JavaScript typedArray.findIndex() with Example
Next article icon

jQuery | index() with Examples

Last Updated : 01 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The index() is an inbuilt method in jQuery that is used to return the index of the specified elements with respect to the selector.

Syntax:

$(selector).index(element)

Parameter:

It accepts an optional parameter “element” which is used to get the position of the element.

Return value:

It returns an integer denoting the index of the specified element.

Example: This example shows the working of index() function.

html 
<!DOCTYPE html> <html>  <head>     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>     <script>         <!--jQuery code to demonstrate index function -->          // document ready         $(document).ready(function () {             // if the list is clicked             $("li").click(function () {                 // index()                 // to return the index of the clicked                 // element of the list                 document.getElementById("demo").innerHTML = "Clicked Index "                     + $(this).index();             });         });     </script> </head>  <body>      <p>Click on the elements of the list to display their index         number with respect to the other elements in the list.</p>      <ul>         <li>Geeks</li>         <li>for</li>         <li>Geeks</li>     </ul>      <p id="demo"></p> </body>  </html>

Output:

https://media.geeksforgeeks.org/wp-content/uploads/20241001154820/methodOutput.mp4

Example: This example shows the working of index() function.

html 
<!DOCTYPE html> <html>  <head>     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>     <script>         <!--jQuery code to demonstrate index function -->          // document ready         $(document).ready(function () {             // if the list is clicked             $("li").click(function () {                 // index()                 // to return the index of the clicked                 // element of the list                 document.getElementById("demo").innerHTML = "Clicked Index "                     + $($(".myclass")).index($("#id"));             });         });     </script> </head>  <body>      <p>Click on the elements of the list to display their index         number with respect with the other elements in the list.</p>      <ul>         <li>Geeks</li>         <li class="myclass">for</li>         <li class="myclass" id="id">Geeks</li>     </ul>      <p id="demo"></p> </body>  </html>

Output:

https://media.geeksforgeeks.org/wp-content/uploads/20241001154952/12.mp4



Next Article
JavaScript typedArray.findIndex() with Example

S
ShivamKD
Improve
Article Tags :
  • JavaScript
  • JQuery
  • Web Technologies
  • jQuery-Misc

Similar Reads

  • jQuery | data() with Examples
    The data() is an inbuilt method in jQuery which is used to attach data or get data for the selected elements. Syntax: $(selector).data(para1); Parameter : It accepts an optional parameter "para1" which specifies the name of the data to retrieve for the selected element. Return Value: It returns the
    2 min read
  • JavaScript typedArray.findIndex() with Example
    The Javascript typedArray.findIndex() is an inbuilt function in JavaScript that is used to return an index in the tyedArray if the value satisfies the condition given in the function, otherwise, it returns -1. Syntax: typedarray.findIndex(callback) Parameters: It takes the parameter “callback” funct
    2 min read
  • jQuery even() Method
    The even() method in jQuery is used to select the even indexed elements from the selected elements. Syntax: $(selector).even()Return Value: It returns the even indexed elements. Example 1: This example selects the even indexed list elements. [GFGTABS] html <!DOCTYPE HTML> <html> <head
    2 min read
  • JavaScript typedArray.entries() with Examples
    The Javascript typedArray.entries() is an inbuilt function in JavaScript that gives a new array iterator object containing the key and value pairs of the given typedArray object. Syntax: typedArray.entries() Parameter: It does not accept any parameters. Return value It returns a new array iterator o
    2 min read
  • jQuery grep() Method
    This grep() method in jQuery is used to finds the elements of an array that satisfies a filter function. Syntax:jQuery.grep(array, function(element, index) [, invert])Parameters: This method accepts two parameters as mentioned above and described below: array: This parameter holds the array like obj
    3 min read
  • How to use array with jQuery ?
    An array is a linear data structure. In JavaScript, arrays are mutable lists with a few built-in methods, we can define arrays using the array literal. The arrays can be used in the same way in jQuery as used in JavaScript. Syntax And Declaration:let arr1=[];let arr2=[1,2,3];let arr2=["India","usa",
    2 min read
  • jQuery eq() Method
    The eq() method is an inbuilt method in jQuery that is used to locate the selected elements directly and returns an element with a specific index. Syntax: $(selector).eq(index)Parameters: Here the parameter "index" specifies the index of the element.Can either be positive or a negative number. NOTE:
    2 min read
  • jQuery :even Selector
    jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
    2 min read
  • jQuery filter() Method
    The jQuery is a very powerful tool which helps us to incorporate a variety of DOM traversal methods to select elements in a document randomly or in sequential order. Most of the DOM traversal methods do not modify the elements whereas they filter them out upon the given conditions. The filter() meth
    2 min read
  • jQuery inArray() method
    This inArray() Method in jQuery is used to search for a specific value in an array and return its index (or -1 if not found). SyntaxjQuery.inArray(val, arr [, Index])Parameters The inArray() method accepts three parameters that are described below: val: The value to search in an array.arr: Any array
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences