Access DOM elements without identifier

Question

I have a page with about 500 div as shown below.

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

when calling the test function, you must hide the menu (innermenu) that calls this function.

my problems

• uniquely identify a div without using id

• How to hide only a specific street.

Answer 1

OK, a quick fix first, although this is not the best way to use JS on your page:

Change the call of this:

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

Then in the test use this:

 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; } } } 

This will hide only the ul div child that will be clicked.

The best way

OK, for a longer answer. Either attach events after the fact using attachEvent and addEventListener , or use the jQuery library to help you. Here is the original solution:

Customize your HTML in this way (no onclick ):

 <div class="test"> 

And then at the very end of your HTML, put this:

 <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> 

Now you do not have JavaScript code in your HTML, and you can get rid of the additional parameter in the test function.

Answer 2

There is a method

document.getElementsByClassName

but it is not supported in all browsers.

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> 

If you can use jQuery, you can do something like this

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

Answer 3

If you do not want to assign identifiers, you can try this to hide the div that is clicked:

 <div onclick="hideMe(this);" class='test> <script> function hideMe(elem) { elem.style.display = 'none'; } </script> 

Answer 4

Try passing "this" as a parameter:

 <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

If getElementsByClassName not supported by all browsers, as pointed out by @rahul , you can iterate through dom and find it yourself - provided that there is only one <ul> with the class name "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; } }