Question

I have a <div id="rptViewer"> that has multiple div and tables, which in turn can have multiple div and tables.
I need a jQuery selector to select all the div or tables under “rptViewer” either directly or indirectly(nesting).

I am trying the following jQuery selectors.

<script type="text/javascript">
    $(document).ready(function() {
        $("[id*='rptViewer'] table").each(function(i, item) {
             $(item).css('display', 'inline-block');
            });
            $("[id*='rptViewer'] div").each(function(i, item) {
                $(item).css('display', 'inline-block');
            });            

            $("[id*=rptViewer] table").attr("width","");
        });
    </script>

But when I am checking it using firebug, I found that only the direct child of ‘rptViewer’ are getting ‘inline-block’ CSS

Answer 1

If you would like to include a class for all table and div inside of rptViewer.
You can do this way:

$("table, div", "#rptViewer").addClass('someStyle');

But if you would like to include a class only for real children of rptViewer.
You can do this way:

$("#rptViewer > table, #rptViewer > div").addClass('someStyle');