Jquery - Kako prikazati index za svaki element zasebno?

Imam ovu situaciju:

<div>
	<section></section>
	<section></section>
	<section></section>

</div>

Želim dinamički pokazati redni broj section elementa. Koristim ugrađenu funkciju index().

<div>
	<section></section>
	<section></section>
	<section></section>
    
</div>


<script>
	var showIndex = $("section").index();
	$("section").append("<span>" + (showIndex +1));	

</script>

Pokaže mi index (broj) ali za sve elemente isti, odnosno pokaže "1"
("+1" sam stavio zbog toga što defoltno broji od nula).

Meni treba da mi pokaže za svaki section element njegov zasebni
index (broj), po redu 1,2,3…

Grafički:

Zahvaljujem!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQ index</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function(){
    $("section").each(function(){
        var $this = $(this);
        $this.html($this.index() + 1);
    });

})
</script>
</head>

<body>
<div>
    <section></section>
    <section></section>
    <section></section>
</div>

</body>
</html>
1 Like

Hvala meštre, to je to! :sunny: