Erhalten Index eines Elements mit Index() in jQuery

Question

$(document).ready(function() { 
 
    var box = $('.box'); 
 
    box.click(function() { 
 
    console.log($(this).index()); 
 
    }); 
 
});

div, section { 
 
    border: 1px solid red; 
 
    width: 80px; 
 
    height: 80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box">1</div> 
 
<div class="box">2</div> 
 
<div class="para">3</div> 
 
<div class="box">4</div>

In dem obigen HTML, das letzte Div mit Klasse .box ist die 3. .box und ich möchte den Index des letzten .box3 sein , aber ich bekomme 4. Welche jQuery-Funktion sollte ich stattdessen verwenden, die alle divs mit der Klasse box suchen und mir dann die Position .box im Set beim Klicken auf die .box zurückgeben?

Answer 1

Sie können .index() verwenden, wenn Sie es auf eine Reihe von Elementen mit $('.box').index($(this))

vergleichen Wenn ein Selektor-String als Argument übergeben wird, .index() gibt ein Integer, der die Position des ersten Elements angibt, innerhalb der jQuery Objekt relativ zu den Elementen durch den Selektor abgestimmt. BTW

, .index() Null-basiert, so dass der Indizes 0 wäre, 1 und 2. Wenn Sie 1 wollen, 2 und 3, nur 1 zu dem Ergebnis hinzufügen.

$(document).ready(function() { 
 
    var box = $('.box'); 
 
    box.click(function() { 
 
    console.log($('.box').index($(this))); 
 
    }); 
 
});

div, 
 
section { 
 
    border: 1px solid red; 
 
    width: 80px; 
 
    height: 80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box">1</div> 
 
<div class="box">2</div> 
 
<div class="para">3</div> 
 
<div class="box">4</div>