jquery - how to get the html inside a div

Question

I have this html:

<div class="portlet-header">
    Company Information ... <button> some button here </button>
</div>
<div class="portlet-content">
    <div class="content_regular">
        <table style=" width:100%; height:100%;">
            ...content
        </table>
    </div>
</div>

how do i get the hmtl after i click the button at the portlet-header part, in this case, the table tag?

I have this jquery code to get the text on the header: $(this).parent().text(); but got nowhere in trying to retrieve the hmtl under the "content_regular" class as shown above.

Hope your wisdom can help me with this. i know this very easy to others but i am not familiar with jquery.

thanks

Answer 1

First, use the html() function instead of the text() function. Second, point your selector to the right node, something like .portlet-content .content_regular table. I'll let you do the combining of these two yourself.

Answer 2

Use .next() to get from .portlet-header to .portlet-content then use .html() rather than .text() to get the content, like this:

$(".portlet-header").click(function() {
  var html = $(this).next(".portlet-content").html();
});

If there may be something between the divs, another element, etc, use .nextAll() instead, like this: .nextAll(".portlet-content:first")

Answer 3

$('.portlet-header button').click(function(){
   alert($('.content_regular').html())
});

nice readings

1. .html()
2. jQuery selectors
3. Traversing

here is a demo