CODEWITHSUNDEEP
jqueryhtml
JoeFletch
JoeFletch

Reputation: 3960

jQuery with Nested Tables, select outer table tr/td with passed Selector

I am trying to setup a nested table function. So within the function I am passing a selected element and I want to select only the children/direct-descendants td/tr of that table and NOT the nested table's td/tr elements. Here is a little example that I setup.

<table class="top">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>
            <table class="nested">
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<div id="results"></div>

and the jQuery / Javascript to go with it...

var tbl = $(".top");
var r = $("div#results");

$(r).html("");

$(r).append("var tbl = $(\".top\")</br>")

$(r).append("$(tbl).find(\"td\").length:" + $(tbl).find("td").length.toString() + "</br>");

$(r).append("$(\"td\", tbl).length: " + $("td", tbl).length.toString() + "</br>");

$(r).append("$(tbl).children(\"tbody\").children(\"tr\").children(\"td\").length: " + $(tbl).children("tbody").children("tr").children("td").length.toString() + "</br>");

The results are as follows...

var tbl = $(".top") (to simulate the passed selector)

$(tbl).find("td").length:12 (selects ALL td elements)

$("td", tbl).length: 12 (selects ALL td elements, same as above)

$(tbl).children("tbody").children("tr").children("td").length: 6 (selects the proper elements, but the jQuery chain seems too long and strict for what I want to do)

Any help to find the proper selector for the children elements of the top level table is much appreciated! Thanks!

Update: here is the jsFiddle.

Upvotes: 2

Views: 8745

Answers (4)

Tgr
Tgr

Reputation: 28160

$('tr:not(tr tr)'). Probably slower than using descendant selector, but much more flexible.

Upvotes: 0

Tim M.
Tim M.

Reputation: 54378

Working fiddle using direct descendant (>) selector: http://jsfiddle.net/3T9sN/

$(function(){
    var rows = $(".top > TBODY > TR");
    alert( "Number of rows: " + rows.length );

    var cells = $(".top > TBODY > TR > TD");
    alert( "Number of cells : " + cells.length );
});​

Of course, you can reuse some of the contexts here to make the query more efficient, such as:

var tbody = $(".top > tbody");

// using children() method
var rows = tbody.children( "TR" );

// using selector context
var cells = $( "> TR > TD", tbody );

alert( "Number of rows: " + rows.length );
alert( "Number of cells : " + cells.length );

Fiddle: http://jsfiddle.net/3T9sN/1/

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50787

var tbl = $('.top');
var stuff = tbl.find('table').filter(function(){
  $('#results').append($('tr, td', this).length);
});

Normally, you would use a return in the filter function, but we don't want to return the elements, we want to use data abstracted from them. For this, do not use the 'return' method.

Standard-issue jsFiddle...

Upvotes: 0

Emmanuel N
Emmanuel N

Reputation: 7449

Pass parent in addition to your selector to find your elements in children

     $("what your looking for ", parent);

Same as 

     $(parent).children("what you are looking for")

The first is much shorter syntax

Upvotes: 0

Related Questions