El index() es un método incorporado en jQuery que se usa para devolver el índice de los elementos especificados con respecto al selector.
Sintaxis:
$(selector).index(element)
Parámetro: Acepta un parámetro opcional “elemento” que se utiliza para obtener la posición del elemento.
Valor de retorno: Devuelve un número entero que indica el índice del elemento especificado.
Código #1:
<!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>
Salida:
antes de hacer clic en cualquier elemento de la lista
Click on the elements of the list to display their index number with respect to the other elements in the list.
- Frikis
- por
- Frikis
Después de hacer clic en «for»-
Click on the elements of the list to display their index number with respect with the other elements in the list.
- Frikis
- por
- Frikis
Índice 1 pulsado
Código #2:
<!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>
Salida:
antes de hacer clic en cualquier elemento de la lista-
Click on the elements of the list to display their index number with respect with the other elements in the list.
- Frikis
- por
- Frikis
Después de hacer clic en cualquier elemento de la lista-
Click on the elements of the list to display their index number with respect with the other elements in the list.
- Frikis
- por
- Frikis
Índice 1 pulsado