通過 JS 獲取倒數第二個 HTML 元素

Question

例如，我有一個聊天。

<div id="chat" style="transform: initial;" class="active selectable">
  <ul id="chat-messages" class="active">
    <li class="admin">
      <span>test1</span>
    </li>
    <li class="admin">
      <span>test2</span>
    </li>
    <li>
      <span class="nick">[10136] dimden: </span>
      <span>test3</span> 
    </li>
    <li>
</div>

我需要獲得倒數第二個元素（test2）。 我如何在沒有 jQuery 的情況下獲得它。

Answer 1

您可以使用document.querySelectorAll獲取與任何 CSS 選擇器匹配的元素列表。 然后你可以取length - 2第length - 2個元素：

var list = document.querySelectorAll("#chat li");
var penultimate = list[list.length - 2];

現場示例：

 var list = document.querySelectorAll("#chat li"); var penultimate = list[list.length - 2]; console.log(penultimate.textContent);

 <div id="chat" style="transform: initial;" class="active selectable"> <ul id="chat-messages" class="active"> <li class="admin"><span>test1 </span></li> <li class="admin"><span>test2 </span></li> <li><span class="nick">[10136] dimden: </span><span>test3</span> </li> </ul><!-- this was <li>, I fixed it --> </div>