Javascript-форум - Как получить порядковый номер?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как получить порядковый номер? (https://javascript.ru/forum/jquery/11984-kak-poluchit-poryadkovyjj-nomer.html)

Как получить порядковый номер?

Нужно получить порядковый номер элемента, по которому произведен клик, сделал так, но не работает, скажите в чем проблема и как правильно это сделать?

$("div").bind("click", function(){
	var a = $("div");
	for (var key in a) {
	    if( a.eq(key) == $(this) ) {
		alert (key);
	    }
	}
});

$( "div" ).click(function ( event ) {
	$( "div" ).each(function ( i ) {
		if ( this == event.target ) alert( i );
	});
});

А можно по порядку как это работает?

$( "div" ).click(function ( event ) { // Вешаем обработчик события
	$( "div" ).each(function ( i ) { // Цикл по всем DIV'-ам
		// Если данный DIV (this) равен элементу, по которому кликнули (event.target), то выводим алерт с номером
		if ( this == event.target ) alert( i );
	});
});

$('div').click( function(e) {
	alert( $('div').index(e.target) );
} );

jQuery настолько изощренный диалект, что позволю себе добавить еще несколько способов получить порядковый номер элемента

//1
$(function(){
    $('div').click(function(){
        alert($(this).html());
   });
});

//2
$(function(){
  $('div').each(function(i){
    $(this).click(function(){
      alert(i);
    })
  });
});

//3
$(function(){
  $('div').each(function(i){
    $(this).bind('click',function(){
      alert(i);
    });
  });
});

//4
$(function(){
  $('div').each(function(){
    $(this).bind('click',function(){
      alert($(this).index());
    });
  });
});

Будет интересно увидеть еще варианты :)

Вариант 1 -- бред.
Варианты 2-3 -- одно и тоже, + что будет, если дивов станет больше?
Вариант 4 -- тоже бред.

Чем бред?
В зависимости от ситуации, каждый их этих вариантов позволяет получить получить порядковый элемента, (если не брать первый псевдо-вариант).
Сам использую подход с event.target.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	google.load("jquery", "1.4.2");
</script>

<script type="text/javascript">
//1
$(function(){
    $('div:eq(0) span').click(function(){
        alert($(this).html());
   });
});

//2
$(function(){
    $('div:eq(1) span').each(function(i){
    $(this).click(function(){
      alert(i);
    })
  });
});

//3
$(function(){
    $('div:eq(2) span').each(function(i){
    $(this).bind('click',function(){
      alert(i);
    });
  });
});

//4
$(function(){
    $('div:eq(3) span').each(function(){
    $(this).bind('click',function(){
      alert($(this).index());
    });
  });
});

</script>


<div>
	<span>0</span>
	<span>1</span>
</div>

<div>
	<span>0</span>
	<span>1</span>
</div>

<div>
	<span>0</span>
	<span>1</span>
</div>

<div>
	<span>0</span>
	<span>1</span>
</div>

Опять 25. Варианты 2-3 сбоят, если добавить еще спанов динамически. Вариант 4 сбоит тут:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    google.load("jquery", "1.4.2");
</script>
 
<script type="text/javascript">
//4
$(function(){
    $('div span').each(function(){
    $(this).bind('click',function(){
      alert($(this).index());
      return false;
    });
  });
});
 
</script>

<div>
    <span>0 <span>1</span></span>
    <span>2 <span>3</span></span>
</div>