trouver l'indice d'un élément

Question

J'ai du HTML comme ça :

<div class="TopClass">

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

</div>

Je cherche à obtenir l'index de la classe d'action par rapport à la TopClass ; si l'utilisateur clique sur la deuxième classe d'action, le résultat devrait être 2.

$('.ActionClass').click(function () {
    alert($(this).parent().parent().index());  // not working    
});

Answer 1

Utilice .index comme ceci qui vous donnera toujours l'indice de .ActionClass même si la structure change. Mais comme .index renvoie à 0-based indice que j'ajoute 1 dans sa sortie :

$('.ActionClass').click(function () {
   alert($(this).closest('.TopClass').find('.ActionClass').index(this) + 1);
});

Violon de travail

Un autre moyen plus court peut être comme ceci, il fonctionne bien avec un seul parent .TopClass jusqu'à présent mais à utiliser avec précaution si vous avez une structure différente. La précédente est plus sûre et fonctionne pour les cas généraux.

$('.ActionClass').click(function () {
   alert($('.ActionClass').index(this) + 1);
});

Violon de travail

Answer 2

Votre code est presque correct, il suffit de récupérer l'index du nœud parent :

$('.ActionClass').click(function () {
    alert($(this).parent().index());
});

Avis de non-responsabilité

Cela ne fonctionne pas quand il y a d'autres frères et sœurs en plus. .ContentClass . Pour cela, vous devez vous référer à l'article de Joy réponse .

Answer 3

Votre parent().parent() vous emmène trop haut dans la structure :

$('.ActionClass').click(function () {
    alert($(this).parent().index());  // not working    
});

Cela fonctionnera, mais comme il s'agit d'une base zéro, vous obtiendrez 0, 1 et 2 pour les trois clics de la division.

http://jsfiddle.net/amelvin/AhReg/

EDITAR

En fonction de votre amendement, vous pouvez utiliser la variable de sélection optionnelle sur la méthode index().

<div class="TopClass">

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="test"></div>
  <div class="test"></div>  
  <div class="test"></div>
  <div class="test"></div>  
  <div class="test"></div>
  <div class="test"></div>  

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

</div>

$('.ActionClass').click(function () {
    alert($(this).parent().index(".ContentClass"));  // not working    
});

Answer 4

$index = jQuery.inArray($(this)[0], $('.ActionClass')) + 1

Cette solution fonctionnera quelle que soit la structure du HTML. Elle trouve l'index du tableau de l'élément '.ActionClass' cliqué dans le tableau contenant tous les éléments '.ActionClass' correspondants.