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

Se você já se perguntou como pode contar de maneira fácil e rápida os campos de um formulário HTML dinâmico, este post é para você! De maneira descomplicada e com um toque de humor, vamos aprender a usar o jQuery para identificar quantos elementos específicos existem em nossa página, baseando-nos em parte do texto do ID. Prepare-se para dizer adeus aos headaches com formulários dinâmicos!

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:

Bacon
Bacon 2
Bacon
42
Foo
Bar

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.