Javascript - Dynamic Expand/Collapse All

Question

I have a jQuery Tree Report that I am trying to create 'expand/collapse all' buttons for.

The following two pieces of code are fired when the corresponding buttons are pressed and work great:

    for (i = 1; i < 100; i++) {

var el = $('#dtt_2597807651112537_table tbody tr')[i - 1];
    // store current level
    var level = Number($(el).attr('dtt_level'));
    // change icon
    $(el).find('span.dtt_icon').removeClass('dtt_collapsed_span');
    $(el).find('span.dtt_icon').addClass('dtt_expanded_span');
    while ($($(el).next()).attr('dtt_level') != null) {
        var el = $(el).next();
        if ($(el).attr('dtt_level') == (level + 1)) {
            // change display
            el.removeClass('dtt_collapsed_tr');
            el.addClass('dtt_expanded_tr');
        } else if ($(el).attr('dtt_level')  == level) {
            break;
        }
    }
}

for (i = 1; i < 100; i++) {
// get related table row
    var el = $('#dtt_2597807651112537_table tbody tr')[i - 1];
    // store current level
    var level = Number($(el).attr('dtt_level'));
    // change icon
    $(el).find('span.dtt_icon').addClass('dtt_collapsed_span');
    $(el).find('span.dtt_icon').removeClass('dtt_expanded_span');
    while ($($(el).next()).attr('dtt_level') != null) {
        var el = $(el).next();
        if ($(el).attr('dtt_level') > level) {
            // change display
            el.addClass('dtt_collapsed_tr');
            el.removeClass('dtt_expanded_tr');
            // change icon
            $(el).find('span.dtt_icon').addClass('dtt_collapsed_span');
            $(el).find('span.dtt_icon').removeClass('dtt_expanded_span');
        } else if ($(el).attr('dtt_level')  == level) {
            break;
        }
    }
};

However, I was wondering if anyone had a nice way to:

1) Get the number of rows that need to be looped through - I just put 100 as a large number to prove my code worked and I don't want to just increase this to an even larger number.

2) Get the class name from the page source - The large number in "dtt_2597807651112537_table" is a report ID generated by the application. This is static for now but I want to eliminate any problems if it changes.

Thanks.

Answer 1

This is all wrong. Well, it's working against how jQuery works, in any case.

jQuery's credo is:

1. Select elements
2. Do stuff to them

Drop your loops. You don't need them.

For example. To toggle the icon on all span.dtt_icon in your document, do

var collapsed = true;

$("#dtt_2597807651112537_table span.dtt_icon")   // select elements
.toggleClass('dtt_collapsed_span', collapsed)    // do stuff to them
.toggleClass('dtt_expanded_span', !collapsed);

or, as a function that can both collapse and expand:

function toggleTree(tree, collapsed) {
    $(tree).find("span.dtt_icon")
    .toggleClass('dtt_collapsed_span', collapsed)
    .toggleClass('dtt_expanded_span', !collapsed);
}

To collapse only the currently expanded ones...

$("#dtt_2597807651112537_table span.dtt_icon.dtt_expanded_span")
.toggleClass('dtt_collapsed_span', true)
.toggleClass('dtt_expanded_span', false);

and so on.

You can boil down your entire code into a few lines that way, and you don't need to write a single loop: Use smart element selection (via jQuery selectors and any of jQuerys find, filter and traversal functions) to single out the elements you want to manipulate and then manipulate them all at once in a single step.

To your second question. There are many ways, pick one:

• use known page structure to determine the right table (e.g. $("div.main > table:first") or something to that effect)
• use known table contents to determine the right table (e.g. $("table:has(span.dtt_icon)"))
• use the table's other classes ($("table.treeReport") maybe?) or for example the table's ID with and a "starts-with" selector ($("table[id^=dtt_]")).

Again it's all about selecting your elements smartly. A dive into the jQuery API documentation, in this case the part about selectors, is recommended.