Question

我创建了一个排序功能，用于根据id对ul中的li元素进行排序。

function noFilterForElements(){
        /* Check where to append */
        var listofelems = $('#ul-to-sort > li');
        if (listofelems.length>0){
            $('#ul-to-sort').html('');
            $.each(listofelems,function(datakey,dataval){
                /* Write out the elements without parents first */
                console.log(dataval);
                if ($(dataval).data('parent') == 0){
                    $('#ul-to-sort').append(dataval);
                }
            });
            $.each(listofelems,function(datakey,dataval){
                /* Write out the elements without parents first */
                if ($(dataval).data('parent') != 0){
                    $('.parent-title[data-actid = "'+$(dataval).data('parent')+'"]').after(dataval);
                }
            });
        }
    }

此问题是在FF和Chrome等中，dataval自动包含li元素的所有内容/子节点。另一方面，在IE中，仅使用li元素。 li元素的所有子元素均未包含在dataval变量中。

在IE 8、9、10和Edge（标准）上进行了测试

请问有什么想法为什么会发生以及如何解决这个问题？

PS：我尝试使用listofelems.each（）进行迭代-相同的结果；在FF和Chrome中工作，但在IE中工作。

其他HTML代码以及每个注释的示例

<ul id="ul-to-sort">
  <li class="parent-title" data-actid="world-1" data-parent = "0">Parent</li>
  <li class="parent-title" data-actid="world-2" data-parent = "world-1">Child 1 of World 1</li>
  <li class="parent-title" data-actid="world-3" data-parent = "world-1">Child 2 of world 1</li>
  <li class="parent-title" data-actid="world-4" data-parent = "world-2">Child 1 of world 2</li>
  <li class="parent-title" data-actid="world-5" data-parent = "world-2">Child 2 of world 2</li>
  <li class="parent-title" data-actid="world-6" data-parent = "world-1">Child 3 of world 1</li>
  <li class="parent-title" data-actid="world-7" data-parent = "world-1">Child 4 of world 1</li>
  <li class="parent-title" data-actid="world-8" data-parent = "world-4">Child 1 of world 4</li>
</ul>

经过JsFiddle的测试，它正在重新排列子元素。

Answer 1

我已经解决了这个问题-发布答案以防万一。

我通过不将ul元素设置为空来解决了这个问题。即$('#ul-to-sort').html('');

一旦我删除了这个，并听取@muuvmuuv＆@Moshin的建议，我就重新编写了函数，如下所示：

function noFilterForElements(){
            /* Check where to append */
            var listofelems = $('#ul-to-sort > li');
            $(listofelems).each(function(elemkey,elemval){
                if ($(elemval).data('parent') == 0){
                    $('#ul-to-sort').append(elemval);
                } else {
                    $('.parent-title[data-actid = "'+$(elemval).data('parent')+'"]').after(elemval);
                }
            });

        }

ul并不是建立在自身之上的-因此即使刷新，它也会创建新元素-这就是为什么我最初将element .html('')设置为空的原因。从理论上讲，当我添加一个新元素时，它应该创建一个副本-但不是-很好。我怀疑由于元素详细信息相同（对原始元素没有更改-只是对其进行了重新排序），因此它没有创建具有相同参数的新元素。（这是一个猜测-如果有人可以帮助我们了解为什么会出现这种情况，请随时修改此答案）。

感谢您的所有帮助。

动态创建的<li>在IE和Firefox及其他浏览器中的行为有所不同

其他HTML代码以及每个注释的示例

1 个答案:

我已经解决了这个问题-发布答案以防万一。