web-dev-qa-db-fra.com

Obtenir l'index de l'élément cliqué dans la collection avec jQuery

Comment puis-je obtenir l'index de l'élément cliqué dans le code ci-dessous?

$('selector').click(function (event) {
    // get index in collection of the clicked item ...
});

Avec Firebug, j'ai vu ceci: jQuery151017197709735298827: 2 _ (J'ai cliqué dans le deuxième élément).

javascriptjqueryeventsjquery-selectors
58
thom

Cela alertera l'index du sélecteur sur lequel vous avez cliqué (en commençant par 0 pour le premier):

$('selector').click(function(){
    alert( $('selector').index(this) );
});
96
Ant
$('selector').click(function (event) {
    alert($(this).index());
});

jsfiddle

59
rsplak

Frères et sœurs

$(this).index() peut être utilisé pour obtenir l'index de l'élément cliqué si les éléments sont frères.

<div id="container">
    <a href="#" class="link">1</a>
    <a href="#" class="link">2</a>
    <a href="#" class="link">3</a>
    <a href="#" class="link">4</a>
</div>

$('#container').on('click', 'a', function() {
  console.log($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
  <a href="#" class="link">1</a>
  <a href="#" class="link">2</a>
  <a href="#" class="link">3</a>
  <a href="#" class="link">4</a>
</div>

Pas frères et soeurs

Si aucun argument n'est passé à la méthode .index(), la valeur de retour est un entier indiquant la position du premier élément dans l'objet jQuery par rapport à ses éléments frères .

Passez le sélecteur à index(selector) .

$(this).index(selector);

Exemple:

Recherchez l'index de l'élément <a> Sur lequel vous avez cliqué.

<tr>
    <td><a href="#" class="adwa">0001</a></td>
</tr>
<tr>
    <td><a href="#" class="adwa">0002</a></td>
</tr>
<tr>
    <td><a href="#" class="adwa">0003</a></td>
</tr>
<tr>
    <td><a href="#" class="adwa">0004</a></td>
</tr>

Fiddle 

$('#table').on('click', '.adwa', function() {
    console.log($(this).index(".adwa"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="table">
    <thead>
        <tr>
            <th>vendor id</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#" class="adwa">0001</a></td>
        </tr>
        <tr>
            <td><a href="#" class="adwa">0002</a></td>
        </tr>
        <tr>
            <td><a href="#" class="adwa">0003</a></td>
        </tr>
        <tr>
            <td><a href="#" class="adwa">0004</a></td>
        </tr>
    </tbody>
</table>
24
Tushar

Il suffit de faire de cette façon: -

$('ul li').on('click', function(e) {
    alert($(this).index()); 
});

OU 

$('ul li').click(function() {
    alert($(this).index());
});
10
Siva Charan

si vous utilisez .bind (this), essayez ceci:

let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);

$(this.pagination).find("a").on('click', function(evt) {
        let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);

        this.goTo(index);
    }.bind(this))
1
feliperohde