定位到具有tabindex属性的最后一个元素？

Question

如何定位具有tabindex属性的给定父级的最后一个元素？

例如：

<div id="popup">
  <div id="some-element" tabindex="0">
  <div id="some-other-element" tabindex="0">
  <div id="yet-another-element" tabindex="0">
</div>

在这种情况下，它将定位到#yet-another-element

Answer 1

您可以将属性选择器[...]与jQuery .last()结合使用：

 let target = $('#popup [tabindex]').last(); console.log(target.attr('id')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="popup"> <div id="some-element" tabindex="0"> <div id="some-other-element" tabindex="0"> <div id="yet-another-element" tabindex="0"> </div> 

---

另一种方法是使用jQuery :last选择器：

$('#popup [tabindex]:last');

 let target = $('#popup [tabindex]:last'); console.log(target.attr('id')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="popup"> <div id="some-element" tabindex="0"> <div id="some-other-element" tabindex="0"> <div id="yet-another-element" tabindex="0"> </div> 

---

如果需要选择特定的tabindex值：

$('#popup [tabindex="0"]:last');

Answer 2

使用JavaScript：

结合使用带有Attribute selectors Document.querySelectorAll() ，以数组状对象的形式首先获取所有元素。 然后使用Spread syntax （ ... ）和array.length - 1从最后一个索引中获取元素：

 var div = document.querySelectorAll('#popup > div[tabindex="0"]'); var lastEl = [...div][div.length - 1]; console.log(lastEl.id) 

 <div id="popup"> <div id="some-element" tabindex="0"></div> <div id="some-other-element" tabindex="0"></div> <div id="yet-another-element" tabindex="0"></div> </div> 

使用jQuery：您可以将:last用作选择器的一部分：

 var lastEl = $('#popup > div[tabindex="0"]:last'); console.log($(lastEl).prop('id')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="popup"> <div id="some-element" tabindex="0"></div> <div id="some-other-element" tabindex="0"></div> <div id="yet-another-element" tabindex="0"></div> </div>