Tengo algunos menús con lista desordenada ( ul ):
<ul class="myul"> <li>Button1</li> <li>Button2</li> <li class="selected">Button3</li> <li>Button4</li> </ul> <ul class="myul"> <li>Button5</li> <li>Button6</li> <li>Button7</li> <li>Button8</li> </ul>y así...
¿Cómo puedo cambiar con jQuery el color de fondo de la ul externa cuando la li interna tiene class="selected" ?
Gracias por adelantado.
En este caso, puede usar el método closest() o parent() . Aquí hay un ejemplo usando el método closest() .
El método closest() apunta a un padre de cualquier nivel relativo a un hijo.
El método parent() solo apunta al padre de primer nivel .
Esta es una solución jQuery:
$('li.selected').closest('ul').css('background', 'green'); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="myul"> <li>Button1</li> <li>Button2</li> <li class="selected">Button3</li> <li>Button4</li> </ul> <ul class="myul"> <li>Button5</li> <li>Button6</li> <li>Button7</li> <li>Button8</li> </ul>Este sería un trabajo para el selector "has" en CSS. Desafortunadamente, en el momento de escribir este artículo, casi no hay soporte de navegador para ello. El navegador "vanguardista" Safari Technology Preview tiene soporte, y eso es todo.
https://caniuse.com/?search=has
Puede buscar "selector primario css" para ver cómo esta ha sido una solicitud de larga data entre muchos desarrolladores web.