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>

Answer 2

它的.index()功能。对于您的代码：

$("h1").index(j_h1) + 1; // 2
$("h2").index(j_h2) + 1; // 4

Answer 3

你可以去找这样的功能。这需要搜索元素，元素的类型和上下文（需要在其中搜索子元素的父元素。）

function posElement(element, tagname,context) {

  return "This is " + ($(tagname,context).index(element) + 1) +" child with tagname " + tagname
}
   
var parent = $("#random_parent");
var j_h1 = $("#random_parent h1.target");
var j_h2 = $("#random_parent h2.target");
  
  
console.log(posElement(j_h1,"h1",parent)); 
console.log(posElement(j_h2,"h2",parent));

<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>

 <div id="random_parent_1">
 <h1></h1>
 <h2></h2>
 </div>

jQuery：相同标记名的元素位置/索引

3 个答案: