Question

I have a number of list items each containing a hyperlink.
What I want to do is get the href from each link and apply it to the list item using the ‘on click’ using query. Meaning the whole li element will be clickable rather than just the hyperlink.

Current HTML:

<ul class="menusidecourse">
<li><a href="LINK1" >Item 1</a></li>
<li><a href="LINK2" >Item 2</a></li>
</ul>

What I want to end up with (either on the li click or on doc ready):

<ul class="menusidecourse">
<li onclick="location.href='LINK1';"><a href="LINK1" >Item 1</a></li>
<li onclick="location.href='LINK2';"><a href="LINK2" >Item 2</a></li>
</ul>

I’ve tried along these lines (but with no luck):

$('.menusidecourse li').click(function(){   
   var link = $('.menusidecourse li a', this).attr("href");
        $('.menusidecourse li', this).replaceWith('???');

    });

Thanks for looking!

note:
It must be done this way as the menu is generated dynamically by joomla.

Answer 1

Like this:

// add a click handler to the li element
$('.menusidecourse li').click(function(){
    // find the a element inside this li and get it's href   
    var link = $('a', this).attr("href");
    // navigate to the retrieved href
    window.location.href = link;
});