通过JS获取倒数第二个HTML元素

时间:2018-10-21 10:34:31

标签: javascript html

例如,我在聊天。

<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的情况下获取它。

1 个答案:

答案 0 :(得分:0)

您可以获得与document.querySelectorAll匹配的任何CSS选择器的元素列表。然后,您可以采用第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>