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的信条是：

选择元素
向他们做点什么

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

例如。要切换文档中所有 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选择器和任何jQuerys查找，过滤和遍历函数）来单个输出你想要操作的元素，然后一步一步地操作它们。

提出第二个问题。有很多方法，选择一个：

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

同样重要的是要巧妙地选择你的元素。建议深入研究jQuery API文档，在本例中为the part about selectors。

Javascript - 动态展开/折叠全部

1 个答案: