How can I get the current index of an element with a class? (JQuery)

Question

Here's my code:

$(document).on("change", ".nomeItem", function() {
    if ($(this).val().length) {
        $(this).addClass("input-green");
        $(this).removeClass("input-red");
        $(this).removeClass("input-white");
        if (!($(this).index() in itemNames)) {
            itemNames.add($(this).index());
            itemNames.activate($(this).index());
        } else {
            itemNames.activate($(this).index());
        }
    } else {
        $(this).addClass("input-red");
        $(this).removeClass("input-green");
        $(this).removeClass("input-white");
        showGeneralMessage("É necessário preencher a quantidade!", "danger");
        itemNames.deactivate($(this).index());
    }
    console.log("Nome: " + JSON.stringify(itemNames));
});

On the page, there's a button that adds a new "product", and this "product" has this class inside of it (".nomeItem"). $(this).index() was supposed to give me the current index (For example, if I trigger a change event inside the third product). Nevertheless, it always returns 1. How can I get the current "eq" or index of an element with a class?

Answer 1

Try use this. This will find the current index from collection of siblings elements:

$('.nomeItem').index( $( this ) );

Anyway see DEMO here. And check the differences between $('.nomeItem').index( $( this ) ); and $( this ).index( ); in action.

Answer 2

尝试这样的事情：（假设您的产品类别为“ clsProduct”

$(document).on("change", ".clsProduct.nomeItem", function() {