javascript - 无法获取排序项目数组以在屏幕上显示结果？

Question

在 my jsfiddle ，我尝试通过调用以下函数对商品从高到低进行排序:

function myFunction() {
  var elements = [].slice.call(document.getElementsByClassName("price"));
  elements.sort(function(a, b) {
    return parseFloat(b.innerHTML.substring(1)) - parseFloat(a.innerHTML.substring(1));
  });
  for (var i = 0; i < elements.length; i++)
    elements[i].parentNode.appendChild(elements[i]);
  console.log(elements);
}

当我console.log时，我可以看到它正在工作，但我无法让结果实际出现在屏幕上并更改我的项目的顺序。

我在 this fiddle 中看到使用下面的 JavaScript，它可以工作，为什么我的不行？

 $(function() {
    $(".offer_item").sort(function(a, b) {
        var priceAText = $(a).find(".offer_price").text();
        var priceBText = $(b).find(".offer_price").text();
        var priceA = parseFloat(priceAText.substring(1, priceAText.length));
        var priceB = parseFloat(priceBText.substring(1, priceBText.length));
        return priceA > priceB;
    }).each(function() {
      $(this).appendTo(".offer_list");
    });
});

Answer 1

工作示例对文档中的项目进行排序。

您的代码在文档外部创建一个数组elements，并引用文档中的元素。然后，您对该数组进行排序，这根本不会改变您的文档。

当执行elements[i].parentNode.appendChild(elements[i]);时，element[i]仍然是对文档中元素的引用并且 .parentNode 也在文档中，因此您可以编辑文档。