javascript中是否有任何内置函数可以使用类选择器或元素选择器选择最后一个元素?

时间:2018-06-28 06:02:42

标签: javascript html css

类似的问题已经问过link。但是我的问题有些不同。

在我的程序中经常使用dom出现新元素。这是我的问题

JavaScript中是否有任何我可以经常选择最后一个元素的内置函数?

这是一个例子

var para = document.createElement("div");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para); 

给定程序经常追加div元素,我也想经常选择div元素。与课程类似

提前谢谢

3 个答案:

答案 0 :(得分:2)

使用querySelectorAll并传递类选择器。然后定位最后一个元素并执行任何操作

let getAllElem = document.querySelectorAll('.test');
getAllElem[getAllElem.length - 1].classList.add('green')
.green {
  color: green
}
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<div class="test">6</div>

答案 1 :(得分:1)

不,Java脚本中没有任何内置函数,但是您应该尝试使用以下逻辑并将其与$(last_selector(".lastclass")).click(); for select last class$(last_selector("div")).click(); for elect last element之类的jquery一起使用

function last_selector(select){
  if(select[0]=="."){
    var allSelect = document.getElementsByClassName(select.slice(1));
  }
  else{
    var allSelect = document.getElementsByTagName(select);
  }
  return allSelect[allSelect.length-1];
}

console.log(last_selector("div"))
console.log(last_selector(".last"))
<div>hello</div>
<div>hello</div>
<div class="last">last class</div>
<div>last element</div>

答案 2 :(得分:0)

  

它将在每个Div中使用$(elementName).children(“ span:last”)。text()

给出最后一个跨度文本

$(document).ready(function(){
console.log($('div').children("span:last").text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="time">2016</span><br>
  <span class="time">2017</span><br>
  <span class="time">2018</span><br>
  <span class="time">2019</span><br>
  <span class="time">2020</span><br>
  <span class="time">2021</span><br>
  <span class="time">2022</span><br>
  <span class="time">2023</span><br>
  <span class="time">2024</span> <br>
</div>