Ermittelt den Index einer bestimmten Klasse auf dem DOM wiederholt

Question

In meinem HTML ich ein Div, die wiederholt wird, ist es so etwas wie dieses: -

<div class="col-md-3 SeccaoProduto"> 
    <p class="productName"></p> 
    <p>Quantidade Atual: <span class="quantidadeProduto"></span></p> 
    <button class="btn btn-default btn-xs IncrementaProduto"><span class="glyphicon glyphicon-arrow-up"></span></button> 
    <button class="btn btn-default btn-xs DecrementaProduto"><span class="glyphicon glyphicon-arrow-down"></span></button> 
</div> 

Wenn ich auf die Schaltfläche klicken, die die DecrementaProduto Klasse hat, Ich möchte den spezifischen Index dieser Klasse erhalten, in diesem Fall DecrementaProduto ist das erste Mal, dass es auf meinem HTML erscheint, ich will den Index = 0;

In meinem JavaScript habe ich versucht, dies: -

$(".DecrementaProduto").click(function(){ 
    console.log($(".SeccaoProduto").index(this)); 
}); 

Aber ich immer den Wert bekommen = -1: S Wie kann ich das tun?

Answer 1

In Ihrem Code bezieht sich $(this) auf die angeklickte Schaltfläche, aber die Auflistung enthält die Schaltfläche nicht, so dass der zurückgegebene Wert -1 wäre.

Stattdessen müssen Sie das übergeordnete Element .DecrementaProduto abrufen, das das angeklickte Element enthält. Wo können Sie die parent() Methode verwenden, um das Element zu erhalten.

$(".DecrementaProduto").click(function(){ 
    console.log($(".SeccaoProduto").index($(this).parent())); 
    //        ------------^^^^^^^--- 
});