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>