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

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:

 

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:

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:

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:

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

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:

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.
Breno RdV
Ex-Psicólogo, com quase uma década de experiência em Recursos Humanos e Gestão de Pessoas, atual desenvolvedor e Analista de Sistemas, trabalhando com PowerBuilder, C#, PowerShell e expandindo horizontes para Python, Xamarin, PHP, Angular e (por que não?) Unity.

Comments

comments

Posted in Dev, JavaScript and tagged , , , , , , , .