[Tutorial] Contando elementos de um formulário onde o ID possua parte de um texto (jQuery)

Posted on by

Definitivamente, este não foi um dos melhores títulos de post que eu já fiz, mas Ok. Imagine a seguinte situação: Você tem um formulário que permite ao usuário adicionar campos dinamicamente. Neste post, vou ensinar como verificar quantos campos existem, usando parte do texto do atributo ID como ‘argumento de busca’. (A solução é bem mais simples que o enunciado…)

Imagine o seguinte formulario:

<form>
    <input type="text" id="observacao_01"/>
    <input type="text" id="observacao_02"/>
    <input type="text" id="observacao_03"/>
    <button type="submit">Enviar</button>
</form>

 

Ele possui 3 campos com IDs parecidos: observacao_01, observacao_02 e observacao_03. Se você quiser contar quantos campos existem com o ID observacao_x, basta utilizar a sintaxe abaixo:

$('[id^=observacao]').length;

Neste exemplo, ela vai retornar o valor 3, pois temos 3 campos que possuem o nome observação.

 

Se, por exemplo, você possuir uma div (ou outro elemento qualquer) com o id observacao_container, ele será contabilizado nesta contagem. Para resolver isso, podemos alterar a sintaxe para deixar a busca mais específica:

$('input[id^=observacao]').length;

No código acima, incluí o nome input, que é o elemento do nosso form que eu quero contar. Se eu não especificar o nome do elemento, todos serão contabilizados.

 

Extra!

Se você quiser contar a quantidade de elementos que possuem determinado valor, também é fácil. Considere o seguinte HTML:

<div class="especial">Bacon</div>
<div class="especial">Bacon 2</div>
<div>Bacon</div>
<div>42</div>
<div>Foo</div>
<div>Bar</div>

O que quero fazer? Contar quantos divs possuem o texto ‘Bacon’…
Para isso, basta utilizar a sintaxe:

$("div:contains('Bacon')").length;

Este código vai retornar 3, pois este é o número de divs que possuem o texto ‘Bacon’.

 

Se eu quiser contar apenas as div que contem o texto ‘Bacon’ e que possuem a classe especial (class=’especial’), basta incluir o nome da classe na sintaxe:

$("div.especial:contains('Bacon')").length;

Este código irá retornar 2, pois apenas 2 divs possuem a classe especial e contém o texto ‘Bacon’.

 

Aproveitando o nome do campo, algumas observações importantes:

  • Esta busca é case sensitive, ou seja, o id Observacao_04 é diferente de observacao_04;
  • Você também poderia utilizar a função .size() ao invés da propriedade .length mas, de acordo com a documentação do jQuery, esta função é exatamente igual a propriedade .length, mas possui o overhead de ser uma função. Outro ponto que deve te estimular a não utilizar a função .size() é que ela foi depreciada na versão 1.8 do jQuery.
The following two tabs change content below.
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profile

Breno RdV

Arquiteto de Software e Desenvolvedor Backend (quase Fullstack), geralmente trabalho com C#, PowerShell, Python, Golang, bash e Unity (esse é mais por hobby). Estou sempre buscando algo novo para aprender, adicionando novas ferramentas ao meu cinto de utilidades.
Posted in Dev, JavaScript and tagged , , , , , , , .