Javascript获取同一类的索引在html页面中重复多次

Question

我试图让同一类的索引在不同的结构中重复多次。例如 single-row 是我的类名和

<div class="somediv1">
    <div class="somediv2">
        <div class="somediv3">
            <div class="single-row">
                <p id="product-name">product name 1</p>
            </div>
        </div>
    </div>
</div>

<div class="somediv1">
    <div class="somediv2">
        <div class="somediv3">
            <div class="somediv4">
                <div class="single-row">
                    <p id="product-name">product name 1</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="somediv1">
    <div class="single-row">
        <p id="product-name">product name 1</p>
    </div>
</div>

<div class="single-row">
    <p id="product-name">product name 1</p>
</div>

下面是我试图通过单击函数获取类 single-row 索引的 javascript 代码:

.on('click', "#product-name", function (e) {
    var index = $(this).parents(".single-row").index();
    //var index = $(".single-row").index(this);
    alert(index);
})

但我没有为每个 div 获取正确的索引。

实例:

$(document).on('click', "#product-name", function(e) {
  var index = $(this).parents(".single-row").index();
  //var index = $(".single-row").index(this);
  alert(index);
})

<div class="somediv1">
   <div class="somediv2">
    <div class="somediv3">
      <div class="single-row">
        <p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>


<div class="somediv1">
   <div class="somediv2">
    <div class="somediv3">
       <div class="somediv4">
      <div class="single-row">
         <p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>
</div>

<div class="somediv1">
  <div class="single-row">
         <p id="product-name">product name 1</p>
</div>
</div>

 <div class="single-row">
         <p id="product-name">product name 1</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

使用$(this).parent().index(".single-row");

$(document).on('click', "#product-name", function(e) {
  var index = $(this).parent().index(".single-row");
  //var index = $(".single-row").index(this);
  alert(index);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="somediv1">
   <div class="somediv2">
    <div class="somediv3">
      <div class="single-row">
        <p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>


<div class="somediv1">
   <div class="somediv2">
    <div class="somediv3">
       <div class="somediv4">
      <div class="single-row">
         <p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>
</div>

<div class="somediv1">
  <div class="single-row">
         <p id="product-name">product name 1</p>
</div>
</div>

 <div class="single-row">
         <p id="product-name">product name 1</p>
</div>