Question

下面的代码适用于动态重新排序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);
        });

Answer 1

我认为问题与@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>

使用quirksmode以及浏览器解析文档（特别是IE）时可能发生的各种其他奇怪的事情，您可能想要考虑问题的另一种解决方案。为什么不使用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中的对象上。

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

排序与IE不兼容？

1 个答案: