Question

I have HTML that looks something like this:

<div class='textbox' data-title='Sometitle'>
<div class='textareaedit'>
     <p><strong>Test sample text</strong></p>
</div>
</div>

I’m sometimes going to have a few different <p> tags inside the textareaedit divs, and sometimes strong tags around the text inside the <p> (as in this example), and sometimes a span tag, and sometimes it’s going to be without further tags inside the <p>.

I want to iterate through each textbox on my page, grab its title and also the text nested inside <p> tags in textareaedit. I’m giving the output via console for testing.
This is my jQuery code, but I get no output for the second console.log() line:

$('.textbox').each(function() {
    $this = $(this);
    console.log($this.attr('data-title')+ ":\n");
    $this.children('textareadit').children('p').each(function(){
        console.log($(this).html()); // not giving any output, it's blank
    });
});

I tried $(this).text() as well, but no difference. You may think this example has the sample text inside <strong> tags within the <p>, but I’ve also tried the same example without the strong, where the text was the direct child of <p>, but it didn’t make a difference. How can I capture the text?

Answer 1

You can use find() method to locate it. Try something like this:

$this.find('.textareadit > p').each(function(){
    console.log($(this).html());
});