ti-enxame.com

jQuery find, each, children e accessing sub-children

Estou ficando um pouco frustrado com o jQuery em uma demonstração que estou criando e me perguntando se o que segue é apenas uma limitação do seletor e dos métodos de pesquisa do jQuery, ou apenas estou usando errado.

Aqui está um exemplo de bloco HTML:

<div class='div_item'>
        <td class='list'>
          <dl><dt class="access_text">Div1 text1</dt></dl>
          <dl><dt class="access_text">Div1 text2</dt></dl>
          <dl><dt class="access_text">Div1 text3</dt></dl>
        </td>
</div>
<div class='div_item'>
        <td class='list'>
          <dl><dt class="access_text">Div2 text1</dt></dl>
          <dl><dt class="access_text">Div2 text2</dt></dl>
          <dl><dt class="access_text">Div2 text3</dt></dl>
        </td>
</div>

Este é o script jQuery 1.9.2:

$().ready(function(){
     $('.div_item'); // this is a 2 jQuery array, with no children
     $('.div_item').find('.access_text'); // This is empty, length 0, .div_item's children aren't populated. Like I was using .children()
     $('.div_item').find('.access_text').each(function() { // This doesn't work because the .div_item children aren't populated?
         alert($(this).innerText);
     }):
});

Minha pergunta é: há uma razão pela qual os filhos nos objetos da matriz $('.div_item') não são preenchidos? Se eles não forem preenchidos, eles não podem ser referenciados, então não podem ser .find() 'ed para corretamente. É aqui que acho que meu uso é o problema.

Todas as sugestões que vi até agora funcionam para um DOM mais plano. por exemplo. <div class='div_item'><dt class="access_text"></dt></div>, Mas não para algo que está mais aninhado.

8
garlicman

Está bem!!! Se alguém está curioso e achou que eu estava louco todo esse tempo, tente testar você mesmo. O jQuery acima + a amostra HTML atualizada COM tags de envolvimento!

Eu estava testando os divs em uma tabela e provavelmente encontrou uma lacuna na análise do DOM. Eu sei que os divs não devem ser inseridos entre os seus elementos, mas nunca esperei que isso me surpreendesse assim!

Aqui está o html ruim que falha na localização do jQuery: (sem elementos filho)

<table>
    <div class='div_item'>
        <tr>
            <td class='list'>
              <dl><dt class="access_text">Div1 text1</dt></dl>
              <dl><dt class="access_text">Div1 text2</dt></dl>
              <dl><dt class="access_text">Div1 text3</dt></dl>
            </td>
        </tr>
    </div>
</table>

Veja como ajustei para funcionar com jQuery:

<table>
        <tr class='div_item'>
            <td class='list'>
              <dl><dt class="access_text">Div1 text1</dt></dl>
                  <dl><dt class="access_text">Div1 text2</dt></dl>
              <dl><dt class="access_text">Div1 text3</dt></dl>
            </td>
        </tr>
</table>

A classe tr agora é encontrada pela consulta. No caso anterior, os filhos do div não foram preenchidos, mas os próprios div foram retornados.

Muito complicado ...

Observe que este é um exemplo e foi adaptado de meu outro trabalho, então peço desculpas se houver erros de digitação confusos.

0
garlicman

Bem, seu código não está realmente correto. . find () não espera uma função como parâmetro, mas um seletor, um objeto jquery ou um elemento DOM.

Olhando para o valor de this em seu retorno de chamada no método find, ele se refere ao documento , e não a você <div> como você espera.

Aqui está um código correto:

$(document).ready(function(){
    // cannot use .children() because the <dt> are not direct children
    $('.div_item').find('.access_text').each(function() {
        alert(this.innerText);
    });
});
11
Didier Ghys