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>

Answer 2

两个问题：

您的主要问题是.index()与no arguments一起获得了您调用它的集合中第一个元素相对于其兄弟姐妹的索引。您想要注释掉的另一种index形式（index taking an argument），但是您传入了错误的元素。您可以通过$(this).closest(".single-parent")找到要传递的密码。（或者，作为Sumodh Nair points out，您可以使用accepting a string的形式。）
id值必须在页面上是唯一的。将那些id="product-name"更改为class="product-name"。（您可能可以不更改此设置而逃脱，但它仍然不正确，需要更改。）

更新示例：

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

<div class="somediv1">
  <div class="somediv2">
    <div class="somediv3">
      <div class="single-row">
        <p class="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 class="product-name">product name 2</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="somediv1">
  <div class="single-row">
    <p class="product-name">product name 3</p>
  </div>
</div>

<div class="single-row">
  <p class="product-name">product name 4</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Javascript在HTML页面中多次获取相同类的索引

2 个答案: