Accès aux éléments DOM sans ID

Question

J'ai une page autour de 500 div comme ci-dessous. Lorsque la fonction de test est appelée, elle doit masquer le menu (innermenu) qui appelle cette fonction.

mes problèmes sont

1. identifier de manière unique la div id sans utiliser

2. Comment cacher que la seule ul particulier.

Answer 1

OK, d'abord la solution rapide, mais il est pas la meilleure façon d'utiliser JS sur votre page:

Modifier l'appel à ceci: dans le test,

<div onclick="test(this);" class="test"> 

Ensuite, utilisez ceci:

function test(el){ 
    var uls = el.getElementsByTagName('ul'); 
    for(var i = 0; i < uls.length; i++){ 
     if(uls[i].className == 'innermenu'){ 
     uls[i].style.display = "none"; 
     break; 
     } 
    } 
} 

Cela permet de masquer tout l'enfant ul du div qui est cliqué.

Une meilleure façon

OK, pour la réponse plus longue. Attachez les événements après coup en utilisant attachEvent et addEventListener ou utilisez une bibliothèque comme jQuery pour vous aider.Voici la solution brute:

Configurez votre code HTML de cette façon (pas onclick):

<div class="test"> 

Et puis à la fin de votre code HTML mis ceci:

<script type="text/javascript"> 
    var divs = document.getElementsByTagName('div'); 
    function test(){ 
     var uls = this.getElementsByTagName('ul'); 
     for(var i = 0; i < uls.length; i++){ 
     if(uls[i].className == 'innermenu'){ 
      uls[i].style.display = "none"; 
      break; 
     } 
     } 
    }; 

    for(var i = 0; i < divs.length; i++){ 
     var div = divs[i]; 
     if(div.className !== "test") continue; 
     if(window.addEventListener){ 
     div.addEventListener('click', test, true); //FF, Webkit, etc 
     } else if (window.attachEvent) { 
     div.attachEvent('onclick', test); // IE 
     } else { 
     div.onclick = test; // Fallback 
     } 
    } 
</script> 

Maintenant, vous n'a pas de code JavaScript dans votre code HTML, et vous pouvez vous débarrasser du paramètre supplémentaire sur la fonction test.

Answer 2

Si vous ne voulez pas affecter ids, vous pouvez essayer de cacher la div qui obtient cliqué:

<div onclick="hideMe(this);" class='test> 

<script> 
function hideMe(elem) 
{ 
    elem.style.display = 'none'; 
} 
</script> 

Answer 3

Il existe une méthode

document.getElementsByClassName

mais il n'est pas supporté dans tous les navigateurs.

javascript

function test(elem) 
{ 
    var childElem = elem.children[0]; 
    childElem.style.display = 'none'; 
} 

<div onclick='test(this)' class='test'> 
    <ul class='innermenu'> 
     <li>1</li> 
     <li>2</li> 
    </ul> 
</div> 

Si vous utilisez jQuery vous pouvez faire quelque chose comme ça

$("div.test").click(function(){ 
    $(this).find("ul.innermenu").hide(); 
}); 

Answer 4

Essayez "this" comme paramètre:

<div onclick='test(this)' class='test> 
<ul class='innermenu'> 
    <li>1</li> 
    ..... 
    </ul> 

function test(sender) { 
     //sender is DOM element that is clicked 
     alert(sender.id); 
    } 

Answer 5

Si getElementsByClassName est pas pris en charge par tous les navigateurs mentionnés par @rahul, vous pouvez parcourir le Royaume et trouver vous-même - à la condition qu'un seul <ul> avec le nom de classe "innermenu"

var uls = document.body.getElementsByTagName("ul"); 
var len = uls.length; 
for(var i = 0; i < len; i++) 
{ 
    var ul = uls.item(i); 
    if(ul.getAttribute("class") == "innermenu") 
    { 
    ul.style.display = "none"; 
    break; 
    } 
}