javascript - 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>

标签： javascripthtml

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>