使用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. 做的東西給他們

放下你的循環。你不需要它們。

例如。要切換圖標所有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爲和一個「開始 - 用」選擇器（$("table[id^=dtt_]")）。

再次，這是所有關於巧妙選擇你的元素。推薦使用jQuery API文檔，在本例中爲the part about selectors。