Javascript - 动态展开/折叠所有

Question

我有一个 jQuery 树报告，我正在尝试为其创建“展开/折叠所有”按钮。

当相应的按钮被按下并且工作正常时，以下两段代码被触发：

    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;
        }
    }
};

但是，我想知道是否有人有一个很好的方法：

1) 获取需要循环的行数 - 我只是将 100 作为一个大数字来证明我的代码有效，我不想将其增加到更大的数字。

2) 从页面源中获取类名 - “dtt_2597807651112537_table”中的大数字是应用程序生成的报告ID。这暂时是静态的，但如果它发生变化，我想消除任何问题。

谢谢。

Answer 1

这都是错误的。好吧，无论如何，它与 jQuery 的工作方式背道而驰。

jQuery的信条是：

1. 选择元素
2. 对他们做事

放下你的循环。你不需要它们。

例如。要在文档中切换 all span.dtt_icon 上的图标，请执行

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);

或者，作为一个既可以折叠又可以展开的函数：

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

仅折叠当前展开的...

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

等等。

您可以通过这种方式将整个代码简化为几行，而无需编写单个循环：使用智能元素选择（通过 jQuery 选择器和任何 jQuery 查找、过滤和遍历函数）来单取出您想要操作的元素，然后一步操作它们。

关于你的第二个问题。方法很多，选一个吧：

• 使用已知的页面结构来确定正确的表（例如$("div.main > table:first") 或类似的东西）
• 使用已知的表格内容来确定正确的表格（例如$("table:has(span.dtt_icon)")）
• 使用表格的其他类（$("table.treeReport") 可能吗？）或例如表格的 ID 和“开始于”选择器 ($("table[id^=dtt_]"))。

同样，这一切都是为了巧妙地选择您的元素。建议深入了解 jQuery API 文档，在本例中为 the part about selectors。