如何使用javascript获取最后一个li元素？

Question

我正在尝试获取 list 的最后一个li元素。 但它没有给出正确的输出。 这是我的标记

<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>

像这样尝试

console.log(document.querySelector('.abc ul li:last-child').innerHTML)

输出元素

<li>1.2</li>

预期输出

 <li>3</li>

Answer 1

有2个问题

• 你的HTML是无效的，因为ul是不是一个有效孩子ul所以嵌套那些需要实际上是一个内li

• 使用>修饰符仅在选择器中查找直接后代

 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>

如果您只想要文本（而不是嵌套的ul ），则可以将该文本放在一个span并仅选择该文本

 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>

如果您只想要文本（而不是嵌套的ul ），则可以将该文本放在一个span并仅选择该文本

Answer 2

您可以像这样使用 javascript 方式。

li = document.querySelectorAll('.abc>ul>li');
console.log(li[li.length-1].innerText);

Answer 3

console.log(document.querySelector('.abc ul li:last-child').innerHTML)

当我们想要将通用样式应用于多个类时，会使用这种提供white space而不是adjacent selectors like ">"的adjacent selectors like ">"语法。

因此，用诸如 > 之类的相邻选择器替换您的whitespace将适用于您的情况，以选择其所有后代。

 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>