Se referir a um objeto html item de lista corretamente em javascript para o Registro de Evento

votos
1

Eu gostaria de saber como eu pode se referir a um objeto item da lista se eu tivesse, por exemplo, a seguinte lista html

<div id=subdiv_2>  
 <div id=subdiv_3>  
  <ul>  
   <li><a href=>Item1</a></li>  
   <li><a href=>Item2</a></li>  
   <li><a href=>Item3</a></li>    
  </ul>  
 </div>  
</div>  

Como é possível registar um onclick para o li Item2 sem ele ter que ter um único elementId por exemplo, eu posso fazê-lo por subdiv_3 porque tem um ID único e não está na lista,

document.getElementById('subdiv_3').addEventListener('click', function();, false);

Meu objetivo é, em última análise para atribuir uma função a cada objeto da lista, para o número de objetos de lista com parâmetros únicos com base na lista de números de objeto, por exemplo:

for(i=0;i<list.length;i++){  
 document.getElementById(list.item+i+).addEventListener(\'click\',function(+i+);,false);;  
}
Publicado 10/12/2008 em 06:46
fonte usuário
Em outras línguas...                            


3 respostas

votos
2

Você pode obter todos os elementos filhos de subdiv_3que são <li>. Então iterar esse ciclo incluindo as funções que você vá.

div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');

for (var i=0, len=els.length; i<len; i++) {
    alert(i);  // add your functions here   
}

Olhando para a sua amostra de código, quando você está no circuito criando suas funções você pode executar em problemas de fechamento de escopo. (Todas as funções serão exibidas para usar o mesmo valor de i.) Confira minha resposta a esta pergunta para lidar com esse problema: Como adicionar manipulador de eventos com argumentos para uma matriz de elementos em JavaScript?

Respondeu 10/12/2008 em 06:59
fonte usuário

votos
1

@Supernovah: Você pode realmente atribuir uma função real para setTimeot(). Que livra você da formatação de strings, que vai ficar no seu caminho quando você quer fazer as coisas mais complexas do que apenas definir uma propriedade.

Este é o código:

function attachToList() {
  var div = document.getElementById('menu2');
  var els = div.getElementsByTagName('li');
  // create a closure returning an anonymous inner function
  var fn  = function(li) {
    return function() {
      li.style.backgroundColor = "#FFFFCC";
    };
  };
  for (var i=0, len=els.length; i<len; i++) {
    // create function instance suitable for current iteration
    var changeLi = fn(els[i]);
    // pass function reference to setTimeout()
    setTimeout(changeLi, 250*i);
  }
}

E uma breve explicação:

Usando um fechamento é o truque que garante que quando setTimeout()os gatilhos, todas as variáveis ainda tem os valores esperados.

Você pode fazer isso escrevendo uma função que retorna uma função. A função externa obtém parâmetros, a função interna não. Mas refere-se aos parâmetros da função externa. No loop, você chamar a função externa (com os parâmetros corretos) e obter uma nova função interna inteira de cada vez, cada qual tem a sua própria versão dos valores dos parâmetros. Isto é o que você atribuir a setTimeout().

Respondeu 10/12/2008 em 08:52
fonte usuário

votos
0

Em reponse ao comentário sobre a Resposta de Benry por Benry, depois de usar seu código, o seguinte prova que cada elementLi pode ser referido com els [i]

function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}
Respondeu 10/12/2008 em 07:29
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more