jQuery get index of an item on click

Question

<div class="owl-stage">
   <div class="owl-item active">
      <div class="item">
        <div class="slider-image"></div>
    </div>
</div>
<div class="owl-item">
    <div class="item">
        <div class="slider-image"></div>
    </div>
</div>
<div class="owl-item">
    <div class="item">
        <div class="slider-image"></div>
    </div>
</div>
<div class="owl-item">
    <div class="item">
        <video src="dummy" controls=""></video>
    </div>
</div>

<a href="">Play Video</a>

When I click on play video button I want the index of the "owl-item" with video tag, it should be 3 in this case ! how ?

clarify your question more.

Amit Kumar Singh
– Amit Kumar Singh

2017-10-25 08:07:49 +00:00
Commented Oct 25, 2017 at 8:07 — Amit Kumar Singh
– Amit Kumar Singh, Commented Oct 25, 2017 at 8:07
@Amit how is it not clear when you read the last line?

Carsten Løvbo Andersen
– Carsten Løvbo Andersen

2017-10-25 08:12:16 +00:00
Commented Oct 25, 2017 at 8:12 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Oct 25, 2017 at 8:12

Carsten Løvbo Andersen · Accepted Answer · 2017-10-25 08:10:03Z

You can use this line $(".owl-stage .owl-item video").closest(".owl-item").index(); it will return the index of owl-item in your case 3

Demo

$("a").click(function(e) {
e.preventDefault()
  var index = $(".owl-stage .owl-item video").closest(".owl-item").index();
  console.log(index)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage">
  <div class="owl-item active">
    <div class="item">
      <div class="slider-image"></div>
    </div>
  </div>
  <div class="owl-item">
    <div class="item">
      <div class="slider-image"></div>
    </div>
  </div>
  <div class="owl-item">
    <div class="item">
      <div class="slider-image"></div>
    </div>
  </div>
  <div class="owl-item">
    <div class="item">
      <video src="dummy" controls=""></video>
    </div>
  </div>
</div>
<a href="">Play Video</a>

Shiladitya · Accepted Answer · 2017-10-25 08:23:26Z

0

Here you go with a solution https://jsfiddle.net/emrsn3s3/1/

$('a').click(function(e){
  e.preventDefault();
  console.log($('video').closest('div.owl-item').index());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage">
   <div class="owl-item active">
      <div class="item">
        <div class="slider-image"></div>
    </div>
</div>
<div class="owl-item">
    <div class="item">
        <div class="slider-image"></div>
    </div>
</div>
<div class="owl-item">
    <div class="item">
        <div class="slider-image"></div>
    </div>
</div>
<div class="owl-item">
    <div class="item">
        <video src="dummy" controls=""></video>
    </div>
</div>
<a href="">Play Video</a>

Hope this will help you.

edited Oct 25, 2017 at 8:23

answered Oct 25, 2017 at 8:12

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

1 Comment

Carsten Løvbo Andersen Over a year ago

The OP says When i click on play video button aka the <a>

Huso · Accepted Answer · 2017-10-25 08:23:28Z

0

Try the jQuery .index() function

For more information see https://api.jquery.com/index/

Example code for your case:

   $(".owl-item").click(function(){
      var index = $(".owl-item").index(this);

       alert("Index:  "+index);
   });

Just a reminder, indexes are zero-based. So the first one will be 0.

UPDATE

I see you want to click on the link and not on .owl-item.

In that case use the following code:

$("a").click(function(){
      var index = $(".owl-item video").closest(".owl-item").index();

      alert("Index:  "+index);
});

edited Oct 25, 2017 at 8:23

answered Oct 25, 2017 at 8:10

Huso

1,4869 silver badges14 bronze badges

1 Comment

Carsten Løvbo Andersen Over a year ago

The OP wants to get the index of owl-item on <a href="">Play Video</a> click

Collectives™ on Stack Overflow

jQuery get index of an item on click

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related