Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

selecionar um unico elemento entre varios com a mesma classe

Boa noite,

possuo uma pagina quem vem do meu server, e tenho uma lista de itens que é preenchida com um <c:forEach> em java, ou seja quantos itens voltar do meu server, mais linhas com as mesmas classe vou ter, mas quero selecionar apenas um especifico com a mesma classe, exemplo:

<div class="car-vqs">
                    <p>R$ <spam class="preco-item">${item.produto.preco }</spam></p>
                    <div class="trash">
                            <button type="submit" class="button-trash">
                                <p class="produtoId" style="display: none;">${item.produto.id}</p>
                                <span class="icon-trashcan2"></span>
                            </button>

                            <input type="hidden" name="${_csrf.parameterName }" value="${_csrf.token }" />
                            <input class="quant-trash" type="number" min="0"  name="quantidade" value="${pedido.getQuantidade(item)}"/>
                            <p class="null-quantidade">${pedido.getQuantidade(item)}</p>
                            <span class="icon-refresh"></span>
                    </div>    
                    <p class="total-pedido-3">R$ ${pedido.getTotalItem(item) }</p>
                </div>

eu tenho um evento de clique no meu elemento com a classe button-trash, que ao clicar no botão eu pego o valor do input com a classe quant-trash, mas eu quero apenas o valor daquela linha especifica, mas quando seleciono o elemento ele pega o primeiro.

não sei se fui claro, mas simplificando, quero selecionar um elemento especifico com a mesma classe de outros.

obrigado.

4 respostas

Olá, Gabriel!

Para resolver este problema, você deveria criar ids ao iterar estes elementos semelhantes.

Você precisa de ter um identificador único para selecionar o seu elemento. Para uma bibliografia super completa sobre seletores, leia mais aqui: http://www.maujor.com/tutorial/guia-completo-seletores-css3.php

Sugiro que também assista o curso de HTML + CSS : )

Uma sugestão de resolução: ao iterar a sua lista no server side, adicione um id em cada elemento. Pode ser "item1", "item2", e por aí vai. Você pode criar uma variável auxiliar que vai iterando em seu loop, ou mesmo utilizar um for normal.

Espero ter ajudado.

Um abraço!

solução!

Olá Gabriel,

Complementando a resposta da Jullie, também é possível pegar o valor de .quant-trash utilizando jQuery puro.

Assumindo que você tenha colocado um evento de click no .button-trash usando jQuery, é possível implementá-lo da seguinte maneira:

$(document.body).on("click", ".button-trash", function (ev) {
    var buttonTrash = $(ev.target);
    var quantTrash = buttonTrash.siblings(".quant-trash");
    var quantTrashValue = quantTrash.val();
   // .... utilizar o valor de quantTrash para alguma coisa
});

Todo listener de evento de jQuery recebe um objeto do tipo Event que possui uma propriedade target, que é o elemento que recebeu o evento.

Então, com este objeto na mão, podemos convertê-lo para um objeto jQuery e utilizar o método siblings, que retorna todos os nós que estão no mesmo nível do nó selecionado (.button-trash nesse caso).

Daí podemos simplesmente pegar o valor do input, usando o método val.

Obrigado Jullie pela ajuda!!

Lucas valeu cara, eu entendi sua resposta, não deu certo, mas pela resposta eu percebi que nesse caso meu botão, e meu input são irmão então voltei ao PAI, com o parent() e ai consegui selecionar.

muito obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software