Home Get Index of Span if based on the class available
Reply: 2

Get Index of Span if based on the class available

Jishad
1#
Jishad Published in 2018-01-13 10:05:03Z

My HTML is as below.

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

When I click on the span I want to get the index of span comparing to all other spans having same class ,

Which means..

  1. Click on before last span I need the index as 4

This is the code I am using to take now.

var selector = $(this);
var selectIndex = selector.index();
Jishad
2#
Jishad Reply to 2018-01-13 10:14:34Z
var selectIndex = selector.parent().children('span.available').index(selector);
bRIMOs
3#
bRIMOs Reply to 2018-01-13 10:23:51Z

you should passe the current element to index() to get it's index from all the current available span

so you can get the index by using $("span.available").index($(this))

PS: avoid using attribute directly on you html tag , you have to use the data- for both seatid and seatname => (data-seatid , data-seatname ) , you can access those by using dataset or data() in jquery

See below snippet

$(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>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.25377 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO