Estoy tratando de obtener el último elemento li de la lista. pero no está dando la salida correcta. aquí está mi marcado
<div class="abc"> <ul> <li>1</li> <ul><li>1.1</li><li>1.2</li></ul> <li>2</li> <ul><li>2.1</li><li>2.2</li></ul> <li>3</li> <ul><li>3.1</li><li>3.2</li></ul> </ul> </div>intentando así
console.log(document.querySelector('.abc ul li:last-child').innerHTML)elemento de salida
<li>1.2</li>Rendimiento esperado
<li>3</li>hay 2 problemas
Su HTML no es válido ya que ul no es un elemento secundario válido de ul , por lo que los anidados deben estar realmente dentro de un li
Use el modificador > para encontrar descendientes directos solo en el selector
console.log(document.querySelector('.abc>ul>li:last-child').innerHTML) <div class="abc"> <ul> <li> 1 <ul> <li>1.1</li> <li>1.2</li> </ul> </li> <li> 2 <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li> 3 <ul> <li>3.1</li> <li>3.2</li> </ul> </li> </ul> </div> Si solo desea el texto (y no el ul anidado), puede colocar ese texto en un span y seleccionarlo solo
console.log(document.querySelector('.abc>ul>li:last-child span').innerHTML) <div class="abc"> <ul> <li> <span>1</span> <ul> <li>1.1</li> <li>1.2</li> </ul> </li> <li> <span>2</span> <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li> <span>3</span> <ul> <li>3.1</li> <li>3.2</li> </ul> </li> </ul> </div> Si solo desea el texto (y no el ul anidado), puede colocar ese texto en un span y seleccionarlo solo
Puedes simplemente ir por la forma de javascript como esta.
li = document.querySelectorAll('.abc>ul>li'); console.log(li[li.length-1].innerText);console.log(document.querySelector('.abc ul li:last-child').innerHTML) Esta sintaxis de dar white space en lugar de adjacent selectors like ">" se usa cuando queremos aplicar estilos comunes a varias clases.
Entonces, reemplazar su espacio en whitespace con selectores adyacentes como> funcionará en su caso para seleccionar todos sus hijos descendientes.
console.log(document.querySelector('.abc>ul>li:last-child').innerHTML) <div class="abc"> <ul> <li> 1 <ul> <li>1.1</li> <li>1.2</li> </ul> </li> <li> 2 <ul> <li>2.1</li> <li>2.2</li> </ul> </li> <li> 3 <ul> <li>3.1</li> <li>3.2</li> </ul> </li> </ul> </div>