排序与IE不兼容？答案

【问题标题】：Sort not compatible with IE?排序与IE不兼容？
【发布时间】：2009-11-08 18:37:48
【问题描述】：

下面的代码可以很好地在 Firefox 中动态重新排序链接，但由于某种原因不能在 IE（版本 7）中。任何想法代码的哪一部分导致问题？谢谢。

        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);
        });

【问题讨论】：

你的 HTML 是什么样子的，因为上面的代码在 IE6,7,8 中对我有效，如果你顺便添加了 DTD 中没有的属性，一些浏览器不喜欢它。
与 les 相同，为我工作（在 IE8 上为 7）：jsbin.com/emake。请发布更多代码，或在其中不起作用的页面。

标签： javascript jquery internet-explorer sorting

【解决方案1】：

我认为问题与@Les 和@Kobi 制作的cmets 有关，因为您正在向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>

对于 quirksmode 和浏览器解析文档（尤其是 IE）时可能发生的各种其他奇怪的事情，您可能需要考虑另一种解决问题的方法。与其将数据作为属性存储在 HTML 中，不如使用 jQuery data() 函数来存储 jQuery 中元素的 amount 数据键，然后检索排序的值。

 // 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 中的对象。

编辑：关于我的 doctype 和命名空间的回答，需要意识到的重要一点是 HTML/XHTML 和 DOM 之间存在差异。 jQuery 的优点之一是它使这种差异变得不那么麻烦，但理解存在差异仍然很重要。 jQuery 处理 DOM，它是由浏览器从解析的文档中创建的。快速查看quiksmode 会告诉您，根据文档的文档类型和浏览器解析它的模式，可能会发生各种奇怪的事情。我的直觉是，这是其中之一。使用自定义属性扩展 XHTML（因此 XHTML 中的 X）并没有错，例如 Adobe 的 spry 框架有趣地使用 XHTML 源代码中的自定义属性来定义要在加载 DOM 后创建的自定义小部件和区域。但是，与 Web 开发中的所有内容一样，您必须按照标准进行编码，否则您将其留给浏览器来尝试找出您要做什么，并且有时（通常在 IE 的情况下）会出错。

【讨论】：

您不需要 xhtml 命名空间来使用自定义扩展属性。事实上，jQuery 的 .data 只是作为自定义 expando 属性存储在元素本身上。无论如何，正如@Kobi 指出的那样，OP 的代码工作正常，一定还有其他东西丢失了。
我同意你的观点，正如我指出的那样，XML 命名空间和使用 jQuery 的 $.data 方法是两个不相关的解决方案。但是，向 DOM 对象添加自定义属性（就像 jQuery 在解析 HTML 并加载 DOM 之后所做的那样）与使用浏览器从 HTML 解析的自定义属性不同。我仍然认为目前这就是问题所在，假设自定义属性从 HTML 中解析并存在于 DOM 中，代码本身很好，并且同一浏览器可以根据解析模式和 doctype 以不同方式解析 HTML。
啊，我确实注意到我说“而不是将数据作为属性存储在 DOM 对象上”，而我应该说“而不是将数据作为属性存储在 HTML 中”。在这里，我告诉您，当我自己似乎都不知道时，这是有区别的，我将进行编辑以澄清我的意思。