JQuery find, each, children and access sub-children

Question

I was a bit disappointed with jQuery in the demo I spank together, and I was wondering if the following restriction is only for jQuery selector and search methods, or am I just using it incorrectly.

Here is an example HTML block:

<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> 

Here's the jQuery 1.9.2 script:

 $().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 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); }): }); 

My question is: is there a reason why children in $('.div_item') array objects are not populated? If they are not filled in, they cannot be referenced, therefore .find() 'ed cannot be for the correct one. This is where I think my problem is the problem.

All the suggestions I've seen so far work for a more dense DOM. for example, <div class='div_item'><dt class="access_text"></dt></div> , but not for what is further nested.

Answer 1

Ok !!! If someone is curious and thought I’m crazy all the time, try checking it yourself. The above jQuery + updated HTML sample with wrapper tags!

I tested the div inside the table and probably found a gap in the DOM parsing. I know that a div should not be inserted between them and the elements, but I never expected it to surprise me like that!

Here's a bad html that jQuery cannot find: (without children)

 <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> 

This is how I configured it to work with 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> 

Now the tr class is found in the query. In the previous case, the children of the div were not populated, but the divs themselves were returned.

Very difficult...

Please note that this was a sample and was adapted from my other work, so I attribute if there were any tangled typos.

Answer 2

Well, you code is not entirely correct. .find () does not expect a function as a parameter, but a selector, jquery object, or DOM element.

Looking at the this value in your callback in the search method, it refers to the document, not the <div> , as you would expect.

Here is the correct code:

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