Elemento de la lista de jQuery Mobile Botón dividido sin enlace en el elemento principal

Question

Digamos que tengo un sitio jQuery Mobile con un grupo de <li> con un icono de división (data-icon="grid").

¿Es posible tener el lado izquierdo del elemento de la lista no envuelto en un href pero mantenga el botón en el lado derecho?

Ejemplo: http://jsfiddle.net/SSQMB/

que he intentado:

$(selection).contents().unwrap(); 

Y esto funciona, elimina el enlace conforme a lo solicitado (y soluciona el problema que he descrito más adelante), pero va y rompe un montón de la disposición y el estilo en el elemento de la lista.

El tema que estoy tratando de resolver es la siguiente:

• tengo alrededor de 100 <li> elementos en una página
• Cada <li> podría tener un elemento <select> en ella con 5-10 opciones.
• Cuando se utiliza el estilo jQuery Mobile predeterminado de un <select> todo funciona bien
• Sin embargo, esto tiene un gran impacto en el rendimiento. Un iPhone 4S lucha para desplazarse, y un iPad 2 (no Android es realmente mejor, por una vez, pero sigue siendo perfecto) es prácticamente unusuable
• Poner data-role="none" en los <select> elementos hace que la página rápido y viable de nuevo
• Sin embargo, se rompe en un navegador de escritorio (Firefox, en particular), ya que al hacer clic para seleccionar un elemento de la <select>, el enlace desde detrás de la <select> se activa y la caja <select> se cancela

¿Alguna idea?

Answer 1

OK, después de profundizar en el stock jQuery Mobile CSS, encontré los estilos que determinan el formato para el <li>. Yo duplicado estos en una hoja de estilo separada y les hizo se aplican a un <span> en lugar de un <a>:

 
.ui-li .ui-btn-text span.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 
.ui-li .ui-btn-inner span.ui-link-inherit { padding: .7em 15px .7em 15px; display: block; } 

A continuación, configure el <li> como tal:

<li data-icon="grid"> 
    <a href="#" onclick="return false;" class="leftLink"> 
    <span class="ui-link-inherit"> 
     .... content .... 
    </span> 
    </a><a href="#"> ... </a> 
</li> 

Entonces algunos jQuery:

$('.leftLink').parent().parent().parent().removeClass('ui-btn'); 
$('.leftLink').contents().unwrap(); 

y Voila: http://jsfiddle.net/Zwhs3/2/