Javascript

Question

我有一个 jQuery 树报告，我正在尝试为其创建 'expand/collapse all' 个按钮。

按下相应按钮时会触发以下两段代码，效果很好：

    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) 从页面源中获取class名称 - "dtt_2597807651112537_table"中的大数字是应用程序生成的报告ID。目前这是静态的，但如果它发生变化，我想消除任何问题。

谢谢。

Answer 1

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

jQuery 的信条是：

Select 个元素
对他们做点什么

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

例如。要切换文档中 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 的查找、过滤和遍历功能）来挑出您要操作的元素，然后一步操作所有元素。

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

使用已知的页面结构来确定正确的 table（例如 $("div.main > table:first") 或类似的东西）
使用已知的table内容来判断正确的table（例如$("table:has(span.dtt_icon)")）
使用 table 的另一个类（可能是 $("table.treeReport")？）或者例如 table 的 ID 和 "starts-with" 选择器($("table[id^=dtt_]")).

再次强调，巧妙地选择您的元素。建议深入研究 jQuery API 文档，在本例中为 the part about selectors。

Javascript - 动态 Expand/Collapse 全部

Javascript - Dynamic Expand/Collapse All

jquery

tree

collapse

expand