jQuery find each children and accessing sub-children

0 votes

I've been getting a bit frustrated with jQuery on a demo I'm slapping together and was wondering if the following is just a limitation of jQuery's selector and search methods, or I'm just using it wrong.

Here's 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'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);
     }):
});

My question is, is there a reason why are the children in the $('.div_item') array objects not populated? If they're not populated, they can't be referenced, then can't be .find()'ed for properly. This is where I think my usage is the problem.

All the suggestions I've seen so far work for a flatter DOM. e.g. <div class='div_item'><dt class="access_text"></dt></div>, but not for something that's further nested.

Jun 27, 2022 in Web Development by gaurav
• 23,260 points
5,216 views

1 answer to this question.

0 votes

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

Looking at the value of this within your callback in the find method, it refers to the document, and not you <div> as you expect.

Here's a 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);
    });
});
answered Jun 27, 2022 by rajatha
• 7,680 points

Related Questions In Web Development

0 votes
0 answers

jQuery get each background image URL of each element and wrap it in a href

So i am trying to get the ...READ MORE

Aug 11, 2022 in Web Development by gaurav
• 23,260 points
1,049 views
0 votes
1 answer

What is the difference between JavaScript and jQuery?

JavaScript is an independent language and can ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
640 views
0 votes
1 answer

how to add erroricon and custom validation message using jquery?

By default, the error message is put ...READ MORE

answered Jun 30, 2022 in Web Development by rajatha
• 7,680 points
4,553 views
0 votes
0 answers

scroll up and down a div on button click using jquery

I am trying to add a feature ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
8,071 views
0 votes
0 answers

Uncaught TypeError: Cannot read property 'top' of undefined

I have two different kinds of sticky ...READ MORE

May 11, 2022 in Java-Script by Kichu
• 19,050 points
3,353 views
0 votes
0 answers

Getting jQuery selector to recognize newly-added DOM elements

I've searched the jQuery docs and here ...READ MORE

Aug 18, 2022 in Web Development by gaurav
• 23,260 points
1,811 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,274 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
15,577 views
0 votes
1 answer

Jquery and Menu and logo

Seems your anchor tag is not visible ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
388 views
0 votes
1 answer

jQuery $(this) selector function and limitations

this isn't a jQuery "thing", but a basic JavaScript ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
630 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP