2011-03-09 51 views
1

我正在學習如何遍歷DOM所以這個問題是有關jQuery的切換等待圖像。而AJAX調用時

我使用ColdFusion輸出一些數據庫的結果。循環循環遍歷表數據,而不循環遍歷錶行。在每個表格中,我有按鈕來執行各種Ajax調用(我已經有這個工作)。當點擊一個按鈕,我想顯示左右的用戶知道是怎麼回事,然後隱藏或當Ajax調用完成切換切換動畫微調。基本上我只需要幫助確定微調以切換它。 ID不是唯一的

我的第一次嘗試是找到衣櫃跨度標籤到點擊按鈕。我沒有那個工作。我的第二個嘗試是使用.parent()獲取TD,然後從那裏使用.next()來定位span標籤,這將允許我切換它。我也無法做到這一點。在寫出來之後,next()可能不是正確的選項,但是我仍然在學習如何遍歷DOM。 :)

注:下面的代碼顯示默認的微調,但我這裏不顯示的功能,這將通過jQuery的切換功能隱藏它。

<table cellpadding="3" class="tablesorter" id="table_id"> 
<tr> 
    <th class="form"><label>System Name</label></th> 
    <td> 
     <button type="button" id="removeButton" class="fg-button ui-state-default ui-corner-all remove_SystemName" >Remove</button> 
     <button type="button" id="checkButton" class="fg-button ui-state-default ui-corner-all check_SystemName" >Check</button> 
     <span id="statusInfoDiv" class="statusInfoDiv"><img src="/assets/images/working.gif"> Working...</span></td> 
</tr> 

jQuery的選項1我試過

$(".check_SystemName").live("click", function(){ 
var spinner = $(this).closest('span').find("statusInfoDiv"); 
spinner.toggle(); 
}); 

jQuery的選項2我試圖

$(".check_SystemName").live("click", function(){ 
var spinner = $("this").parent().next(".statusInfoDiv"); 
spinner.toggle(); 
}); 
+0

「ID是不是唯一的」你的意思是你用相同的ID不止一次在頁面? AFAIK這是一個非常糟糕的主意。 – Terseus 2011-03-09 16:46:36

+0

我完全同意。這就是說,「項目」,可以添加到列表中的表的形式(一種很難解釋),所以唯一的ID是不容易沒有性能的損失得到。我更喜歡使用唯一的ID,但基於這個項目的參數,我無法避免它。 – HPWD 2011-03-09 17:00:29

回答

0

您需要遍歷 「向上」 的DOM用父...然後你可以拖拉機使用chiildren或兄弟姐妹回退「下」DOM。

,所以你可以做soemthing,如:

$(this).parent().children('.statusInfoDiv').toggle(); 
+0

我讀過關於兒童的內容,但我沒有「得到」它,所以我會再次審查。順便說一下,這工作。非常乾淨和優雅。 – HPWD 2011-03-09 17:01:24

+0

如果我想找到一個SPAN標籤,所以我可以根據ajax調用結果分配文本而不是切換圖像,我會將代碼更改爲'$(this).parent()。children('span.statusDiv' ).text('done');'? – HPWD 2011-03-09 21:12:59

+0

您可以專門對類電話......你不必包括HTML元素的選擇。有很多方法可以更新jquery中的div/span ... innerHtml是一個很好的研究。 – Patrick 2011-03-11 13:01:28