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

Question

I have created a sorting function to sort the li elements in a ul based on an id.

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

The problem with this is that in FF & Chrome etc, the dataval automatically contains all the content / child nodes for the li element. In IE on the other hand, only the li element is taken. All children of the li element is not contained in the dataval variable.

Tested on IE 8, 9, 10 and Edge (standards)

Any ideas on why this is happening and how I can overcome this problem please?

PS: I have tried iterating with listofelems.each() - same result; working in FF & Chrome but not IE.

Additional HTML code as well as an example as per comment

<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>

Tested with JsFiddle and it is re-arranging the child elements.

Answer 1

I have resolved this - posting an answer in case it helps somebody

I have resolved the problem by NOT setting the ul element to empty. Ie $('#ul-to-sort').html('');

Once i removed this, and taking the advice of @muuvmuuv & @Moshin, I re-wrote the function like so:

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

        }

The ul is not building upon itself - so even on refresh it creates new elements - which is why i initially set the element .html('') to empty. In theory when I append a new element it should create a duplicate - but it is not - which is good. I suspect that becasue the element details are the same (no change to the original element - just re-ordering it), it is not creating a new element with the same parameters. (This is a guess - if anybody can help us understand why this is the case, please feel free to edit this answer out).

Thanks for all your help.