Pegar a posição do elemento dentro do container

[dnielrodrigues 1]

Como fazer isso funcionar?:

 

 

//arrays de objetos dentro do container

var links = document.getElementById("ID_DA_SECTION").getElementsByTagName("img");

//exemplo de funcao

function minha_funcao () {

alert(i);

}

//evento de clique

for(i = 0; i <= links.length-1; i++){

links.addEventListener("click", minha_funcao, false);

}

 

 

 

 

 

 

 

Traduzindo:

Ele deveria retornar no alert a posição da foto dentro do container. Ou seja, se clicarmos na terceira foto, retornaria "2" no alert, se clicarmos na quarta retornaria "3" no alert, e assim sucessivamente.

 

O erro: quando clico em qualquer uma ele sempre retorna a posição da última foto (como se fosse um fotos.length)

 

O objetico é futuramente substituir o "alert(i)" por algo como

 

fotos.addClass("ativado");

 

Onde fotos é um array de elementos dentro de "outro" container.

 

 

 

 

Obrigado,

[William Bruno 1501]

exemplo:

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

<img src="http://placehold.it/150x150" alt="" width="150" height="150">

 

 

<script>

(function(){

"use strict";

 

 

var $imgs = document.getElementsByTagName("img"),

i = $imgs.length;

 

 

while (i--) {

(function($img, i){

$img.addEventListener("click", function(event) {

alert(i);

}, false);

}($imgs, i));

}

 

}());

</script>

[dnielrodrigues 1]

Obrigado Wiliam, só não entendi bulhufas desse código. Estou vendo que preciso realmente estudar mais pra entender esse processo sem usar jQuery.

 

Alguém indicaria algum link ou blog que eu possa estudar os conceitos usados nesse script, tipo:

 

Precisa estar tudo dentro de um função anônima mesmo e porque?

A função precisa estar entre () e precisa ter ()) no final e porque?

Não entendi o que é esse $img (seria $imgs)...

Logo depois da função têm um ($imgs,i) e isso ta depois do }. Desconheço essa sintaxe...

Depois de ("img") deve ser um ; no lugar do , mas como percebi uma identação na variável de baixo, queria entender porque é assim...

 

Obrigado pela paciência...

[William Bruno 1501]

Precisa estar tudo dentro de um função anônima mesmo e porque?

não é "obrigatório", funcionaria sem a função anônima autoexecutável externa.

 

Mas como boa prática, para não poluir o namespace global, e tornar essa rotina privada ao acesso externo, usei essa clousure.

A função precisa estar entre () e precisa ter ()) no final e porque?

o ()) final é como a função se autoexecuta. Sem isso, a função anônima não faria nada, nunca seria chamada.

Não entendi o que é esse $img (seria $imgs)...

$img, é o parâmetro que veio da função anônima dentro do while.

A cada volta do loop, $img aponta para um

$imgs[i]

, fiz isso por questões de clareza no código e cache da variavel, num escopo local menor.(mais performance)

Logo depois da função têm um ($imgs[ i ],i) e isso ta depois do }. Desconheço essa sintaxe...

isso é novamente, quem autoexecuta essa função anônima, mas nesse caso, essa anônima ainda recebe argumentos.

Depois de ("img") deve ser um ; no lugar do , mas como percebi uma identação na variável de baixo, queria entender porque é assim...

não entendi a pergunta.

 

 

 

Note que o "truque" para funcionar a variavel i, foi a clousure interna no while. Ela fez com que o escopo do i, fosse transferido para a função do addEventListener, e assim o alert mostra o número correto.

[dnielrodrigues 1]

Obrigado de novo. Ajudou muito.

 

Nunca ouvi falar de clousures. Vamos ver se agora eu resolvo essa parda e aprendo de vez.

 

Status atual, estudando novos horizontes. Começando com esse link aqui:

http://rodbv.wordpress.com/2010/09/16/javascript-pra-gente-grande-entendendo-closures/

[dnielrodrigues 1]

Posso dizer que o código do amigo William funcionou perfeitamente. Mas não posso ficar apenas no copiar e colar. Estou tentando entender o conteceito de clousure e aprimorando o conhecimento para poder entender cada parte do trecho do código que ele passou.

 

Novamente, obrigado.