2009-11-08 118 views
-1

下面的代碼適用於動態重新排序firefox中的鏈接,但由於某種原因,不在IE(版本7)中。任何想法代碼的哪一部分導致問題?謝謝。排序與IE不兼容?

 var parent = $('#itemHolder'); 
     var children = $('a', parent); 
     var children = $('a', parent).sort(function(a, b) { 
      return parseInt($(b).attr('amount')) - parseInt($(a).attr('amount')); 
     }); 


     $.each(children, function(i, child) { 
      parent.append(child); 
     }); 
+1

你的HTML是什麼樣子的,因爲上面的代碼適用於我在IE6,7,8中某些瀏覽器不喜歡它,如果你添加屬性不在DTD中的方式.. – Les 2009-11-08 18:47:50

+1

與les,爲我工作(在IE8上爲7):http://jsbin.com/emake。請發佈一些更多的代碼,或一個頁面不工作。 – Kobi 2009-11-08 20:28:48

回答

0

我認爲這個問題涉及@Les和@Kobi製成,您要添加的屬性在HTML元素而不定義額外的命名空間的註釋。由於它們未在根名稱空間中定義,瀏覽器可能會忽略它們。

第一種解決方案是將命名空間的附加屬性和doctype設置爲某種類型的XHTML,這應該可以解決大多數瀏覽器中的問題。這裏是你將如何做到這一點:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:myNS="http://uri.for.your.schema" xml:lang="en" lang="en"> 
     <!---more html----> 
     <a myNS:amount="someAmount" ><!-----></a> 
     <!---more html---> 
</html> 

用怪異模式和其他各種奇怪的事情,當瀏覽器解析文檔(即特別),可以發生,你可能要另想解決你的問題。爲什麼不使用jQuery data()函數爲jQuery中的元素存儲amount數據鍵,然後檢索排序的值,而不是將數據作爲屬性存儲在HTML中。

// Store a value 
$.data(theElement, 'amount', value); 
// Retrieve the value in your sort 
function(a, b) 
{ 
     return parseInt($.data(b, 'amount')) - parseInt($.data(a, 'amount')); 
} 

我不停的parseInt電話在那裏,因爲我不知道什麼數據類型,你會金額存儲爲。我不確定您是在服務器上還是在客戶端上生成這些amount屬性,因此第二種解決方案可能不適合您。您始終可以在存儲值的服務器上生成JSON字符串,並將其作爲對象嵌入腳本標記中的文檔中。然後,您可以訪問這些值並將它們存儲在客戶端的jQuery中引用的對象中。

編輯:關於我的文檔類型和名稱空間答案的重要意義在於HTML/XHTML和DOM之間存在差異。關於jQuery的好處之一就是它使得這種差異變得不那麼麻煩,但瞭解它們之間的差異仍然很重要。 jQuery處理由瀏覽器從解析文檔創建的DOM。快速瀏覽一下quiksmode會告訴你,根據文檔的文檔類型和瀏覽器在各種奇怪的事情中解析它的模式都可能發生。我的直覺是這是這些問題之一。使用自定義屬性(因此XHTML中的X)擴展XHTML沒有什麼問題,例如Adobe的spry框架使XHTML源中的自定義屬性有趣地用於定義在DOM加載後創建的自定義小部件和區域。但是,與Web開發中的所有內容一樣,您必須編寫標準代碼,否則將其留給瀏覽器試圖弄清楚您正在嘗試執行什麼操作,有時(通常爲IE的情況下)會出錯。

+0

您不需要使用自定義expando屬性的xhtml命名空間。事實上,jQuery的'.data'只是簡單地存儲爲元素本身的自定義expando屬性。不管怎樣,@Kobi指出OP的代碼工作正常,還有其他一些缺失。 – 2009-11-09 01:12:47

+0

我同意你的觀點,正如我指出的,XML命名空間和使用jQuery的$ .data方法是兩個不相關的解決方案。然而,爲DOM對象添加自定義屬性(正如jQuery在解析HTML並加載DOM後所做的那樣)與通過瀏覽器從HTML解析自定義屬性不同。我仍然認爲問題出在哪裏,代碼本身很好,假設自定義屬性從HTML中解析並存在於DOM中,並且同一個瀏覽器可以根據解析模式和doctype以不同的方式解析HTML。 – 2009-11-09 04:27:45

+0

啊,我注意到我說「不是將數據作爲屬性存儲在DOM對象上,而是將數據存儲爲HTML中的屬性」。在這裏,我告訴你,當我自己甚至都不知道這件事情時,就會有所不同,我會進行編輯以澄清我的意思。 – 2009-11-09 04:41:02