Convertir todos los “li” con “a” dentro, en botones

Es bastante habitual, cuando trabajamos con una plantilla wordpress, que un tema pinte los elementos de un menu como “LI” con etiquetas “A” dentro, por ejemplo: <li><a>mi menú</a></li>

También es habitual encontrarse que las propiedades CSS que hacen que nuestro enlace se vea como un botón, están aplicada al LI y no al A. Por tanto…. todo el LI parece un botón, pero solo el texto “mi menú” es clicable.

Esto bien puede solucionarse con estilos… pero también puede solventarse en un plis con este sencillo jQuery que hace que la etiqueta LI también sea clicable:

//convierto todos los “li” con “a” dentro, en botones

$.fn.exists = function() { return this.length &gt; 0; };

if ( $("li a").exists() ) {
    $("li a").each(function(){
        $(this).parent().css("cursor","pointer");
        $(this).parent().click(function(){
            window.location.href = $(this).children("a").attr("href");
        })
    });
}