javascript - jQuery:相同标记名的元素位置/索引

Question

这是一个示例元素

<div id="random_parent">
  <h1></h1>
  <h2></h2>
  <h2></h2>
  <h1 class="target"></h1>
  <h2></h2>
  <h2 class="target"></h2>
  <h2></h2>
</div>

现在我创建这两个 jQuery 对象:

var j_h1 = $("#random_parent h1.target");
var j_h2 = $("#random_parent h2.target");

我需要一个函数，它输出父类中元素的位置/索引。示例:

posElement(j_h1) == 2 // The second child with the tagname h1
posElement(j_h2) == 4 // The fourth child with the tagname h2

如何编写这样的函数？谢谢你

Answer 1

使用 .index()函数获取相似类型的 dom 对象数组中的有效索引。

在函数的索引搜索之前使用.prop("tagName")获取当前元素的标记名。

function posElement(listItem) {
  var tmp = listItem.parent().find(listItem.prop("tagName"));
  return ($(tmp).index(listItem) + 1);
}
var j_h1 = $("#random_parent h1.target");
var j_h2 = $("#random_parent h2.target");
console.log(posElement(j_h1));
console.log(posElement(j_h2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="random_parent">
  <h1></h1>
  <h2></h2>
  <h2></h2>
  <h1 class="target"></h1>
  <h2></h2>
  <h2 class="target"></h2>
  <h2></h2>
</div>