javascript - 如果基于可用的类别，则获取跨度索引

Question

我的 HTML 如下。

 <div class="col-md-12 line">

   <span class="d1  available " seatid="515" seatname="A1"></span>

   <span class="d1  available " seatid="516" seatname="A2"></span>

   <span class="d1  available " seatid="555" seatname="A3"></span>

   <span class="d1  available " seatid="556" seatname="A4"></span>

   <span></span>

   <span class="d1  available " seatid="517" seatname="A5"></span>

   <span class="d1  available " seatid="518" seatname="A6"></span>

 </div>

当我单击跨度时，我想获取跨度与具有相同类的所有其他跨度相比的索引，

这意味着..

1. 在最后一个span之前单击，我需要索引为4

这是我现在使用的代码。

var selector = $(this);
var selectIndex = selector.index();

Answer 1

您应该将当前元素传递给 index()从所有当前可用的范围中获取它的索引

因此您可以使用 $("span.available").index($(this)) 获取索引

PS:避免直接在 html 标签上使用属性，您必须使用 data-对于 Seatid 和 Seatname => (data-seatid , data-seatname ) ，您可以使用 dataset 访问它们或data()在jquery中

请参阅下面的代码片段

$(function() {
  $("span.available").on("click",function(){
    console.log("index : " + $("span.available").index($(this)) + " seatid: "+$(this).data('seatid') );
  })
})

span {
  display:block;
}

.as-console-wrapper {
  max-height:75px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 line">

  <span class="d1  available " data-seatid="515" data-seatname="A1">A1</span>

  <span class="d1  available " data-seatid="516" data-seatname="A2">A2</span>

  <span class="d1  available " data-seatid="555" data-seatname="A3">A3</span>

  <span class="d1  available " data-seatid="556" data-seatname="A4">A4</span>

  <span>empty</span>

  <span class="d1  available " data-seatid="517" data-seatname="A5">A5</span>

  <span class="d1  available " data-seatid="518" data-seatname="A6">A6</span>

</div>