A more effecient list of clickable divs.

A more effecient list of clickable divs.

Hi guys.

I use this code snippet when I want to make make a div a selectable hyperlink.

  $('myDiv').click(function(){
        window.location = $('this').attr("mylink.html") ;
    });



It is simple and it works.


But repeating it seems wasteful.

Lets say I have a navigation menu that consists of an ordered list containing a group of list elements. This is a very common design pattern for navigation. Lets say that I want each list item to contain a div, and I want each div to be clickable.

Yes, I know there is a usability issue there: relying on js to create hyperlinks is an ugly sin. But its easy enough to put an anchor element inside the "link div" for user agents without javascript. So here is our html:

<ol>
  <li> <div>  <a> </a>  </div>  </li>
    <li> <div>  <a> </a>  </div>  </li>
    <li> <div>  <a> </a>  </div>  </li>
    <li> <div>  <a> </a>  </div>  </li>
</ol>


So back to my problem:
I want to make each div clickable. As a noob programmer, I could replicate my above js snippet for each one of the divs. But I know just enough about programming for that solution to seem kinda wrong.

How would a more experienced programmer do it?