CODEWITHSUNDEEP
javascriptjquery
Bartłomiej Gładys
Bartłomiej Gładys

Reputation: 4615

Get specific index of element

I have following code:

<div class="something">
  <p class="same"> blah </p> <!-- should return index 0 -->
</div>

<div class="something-else">
  <p class="same"> blah </p> <!-- should return index 1 -->
</div>

<div class="other" >
  <p class="same"> blah </p> <!-- should return index 2 -->
</div>

And my question is simply. How to get index for each paragphs, when the parents are different? I tried something like this:

$('.same').each(function() { console.log( $(this).index() });

but, obviously it returned same value for each element.

Upvotes: 1

Views: 106

Answers (6)

Jandisson
Jandisson

Reputation: 380

This will work:

$('.same').each(function(index) {console.log( index)});

Upvotes: 0

Barmar
Barmar

Reputation: 782285

.index() returns the index within its parent. Since each of these paragraphs is the first element in its containing <div>, you just get 0 every time. Instead, you could get the index of the parent:

$('.same').each(function() {
  console.log($(this).parent().index())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="something">
    <p class="same">blah</p>
    <!-- should return index 0 -->
  </div>

  <div class="something-else">
    <p class="same">blah</p>
    <!-- should return index 1 -->
  </div>

  <div class="other">
    <p class="same">blah</p>
    <!-- should return index 2 -->
  </div>
</div>

Upvotes: 0

Gavin
Gavin

Reputation: 4515

You are really close. Inside your function, this holds the context of your current element with the class same. You want to compare it to the whole list of elements with the 'same' class, so

$('.same').each(function() { console.log($('.same').index(this)))

Upvotes: 0

Darren
Darren

Reputation: 70776

The each function comes with an index parameter.

$(".same").each(function(i) {
   console.log("index " + i); 
});

Full snippet:

$(".same").each(function(i) {
   console.log("Item " + i);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="something">
  <p class="same"> blah </p> <!-- should return index 0 -->
</div>

<div class="something-else">
  <p class="same"> blah </p> <!-- should return index 1 -->
</div>

<div class="other" >
  <p class="same"> blah </p> <!-- should return index 2 -->
</div>

Upvotes: 2

adeneo
adeneo

Reputation: 318332

You can use the same class as a selector for .index()

$('.same').each(function() { 
    console.log( $(this).index('.same') );
});

of course, that would return the same index as the each iteration anyway, but that's how you return an index based on a collection using index(), and not just the index of the element based on the parent element

From the docs

.index( selector )

A selector representing a jQuery collection in which to look for an element.

The other way around also works

$('.same').index(this)

Upvotes: 1

Robert Parham
Robert Parham

Reputation: 704

$('.same').each(function(index) { console.log( index });

Upvotes: 2

Related Questions