3

No Jquery é possivel contar o numero de divs iguais dentro de outra usando o $(".pai .filha").length;. Exemplo:

<div class="pai">
    <div class="filha"></div>
    <div class="filha"></div>
</div>

No exemplo acima terei como resultado da minha contagem o número 2, porém se eu usar duas vezes ou mais a mesma hierarquia de classes em outro bloco a contagem continua como sendo uma só

<div class="pai" data-childs="">
    <div class="filha"></div>
    <div class="filha"></div>
    <div class="filha"></div>
</div>

<div class="pai" data-chils="">
    <div class="filha"></div>
    <div class="filha"></div>
</div>

No exemplo acima terei como resultado o numero 5! Gostaria então de saber se é possível contar esses blocos individualmente e aplicar o resultado dessa contagem dentro do atributo data-childs da div pai pertencente!

Em outras palavras no primeiro bloco gostaria que o resultado desse 3 e no segundo bloco o resultado fosse 2, e aplica-se esse resultado dentro do data-childs, sendo data-childs="3" // data-childs="2", respectivamente!

2 Respostas 2

4

Uma breve descrição sobre os seletores da jQuery, quando você define um seletor a JQuery varre o DOM e agrupa todos os resultados da respectiva consulta, no seu exemplo de código você utilizou a seguinte consulta;

$(".pai .filha").length;

Esta consulta é consistida da seguinte forma: todos os elementos com a classe filha que estejam dentro de um elemento com a classe pai, resumindo considerando o modo como você estruturou o seu HTML todas as divs com a classe filha caem nessa regra portanto o resultado da consulta seria 5.

Como infelizmente a jQuery não nos permite agrupar os nós de filhos dados seus pais de forma simples pra resolver o seu problema uma abordagem mais a adequada seria agrupar polos pais, percorrer os respectivos e contar a quantidade de filhos.

Porém como nem tudo nesta vida são flores, vamos falar sobre o prototype $.data qual utilizamos no exemplo abaixo para a setar o valor do parâmetro data-childs, infelizmente este recurso seta o valor porém ele não força uma atualização do dom ou seja essa data só estará acessível via javascript e se você tentar visualizar o parâmetro pelo Firebug ou Inspector do chrome, você vai perceber que o HTML continua o mesmo e se você tentar acessar por CSS ou similares também não vai funcionar, portanto se você pretende utilizar o valor do data para outros fins que não seja unicamente o javascript, atente para o fato de substituir o recurso $.data pelo $.attr.


Segue abaixo um snippet atestando as afirmações feitas acima.

$('.pai').each(function(){
  $(this).data('childs', $(this).children('.filha').size())
})

// Confirmando os valores do atributo data da primeira div, você deve remover na implementação.
alert($('.pai:eq(0)').data('childs'))
// Confirmando os valores do atributo data da segunda div, você deve remover na implementação.
alert($('.pai:eq(1)').data('childs'))

// Provando que o data-setado pelo jQuery não necessariamente atualiza o DOM
// Colocando o data da segunda div como parameter(atualiza o DOM) e o css reconhece o atributo.
$('.pai:eq(1)').attr('data-childs', $('.pai:eq(1)').data('childs'))
  
.pai { background: #ccc; padding: 20px; text-align: center; margin: 25px 0; }
.pai:after {
   content: attr(data-childs); display: block; text-align: center; color: blue;
}
.filha { background: #fff; width: 50px; height: 50px; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pai">
    <div class="filha"></div>
    <div class="filha"></div>
    <div class="filha"></div>
</div>

<div class="pai">
    <div class="filha"></div>
    <div class="filha"></div>
</div>

1

Neste caso você terá que percorrer o seletor pai para acessar os filhos e contar, do jeito que você esta fazendo é buscado todos os elementos de uma só vez.

Exemplo:

$.each($(".pai"), function(key, val) {
  var qtFilhas = $(this).find('.filha').length;
  $(this).attr('data-childs', qtFilhas);
  document.body.innerHTML += qtFilhas;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="pai" data-childs="">
  <div class="filha"></div>
  <div class="filha"></div>
  <div class="filha"></div>
</div>

<div class="pai" data-childs="">
  <div class="filha"></div>
  <div class="filha"></div>
</div>

1
  • Gabriel, o $(this).data('childs', value) não atualiza o data-childs, você deve usar o this.dataset.childs = value ou $(this).attr('data-childs', value). 3/02/2016 às 14:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .