javascript使用innerHTML按字母顺序对DOM元素进行排序答案

【问题标题】：javascript sort DOM element alphabetically using innerHTMLjavascript使用innerHTML按字母顺序对DOM元素进行排序
【发布时间】：2015-12-03 20:19:13
【问题描述】：

我正在使用 innerHTML 从 JavaScript 数组加载 html。如果单击锚标记，我想按字母顺序对其进行排序。我怎样才能做到这一点？我的代码非常复杂，但对于这个问题，这是重要的部分：

<script>
var locations = [['image.png', 'title', 'category', 'city', 'phone', 'address,
zip', 'lat', 'long', '', 'img.png', 'link', '0']];

var load_list_html = "";    

  load_list_html += '<div data-position="'+
    locations[i][6]+
    ', '+
    locations[i][7]+
    '" id="maplist" class="map-list-box" data-cat="'+
    locations[i][2]+
    '"><img class="list-view-img pull-left" src="'+
   locations[i][9]+
   '"><h3><a class="list-view-title" href="'+
   locations[i][10]+
   '">'+
  locations[i][1]+
  '</a></h3><div id="list-rate" class="rateit" data-rateit-value="'+
  locations[i][11]+
  '" data-rateit-ispreset="true" data-rateit-readonly="true">'+
  '</div><p class="list-text">'+
   locations[i][8]+
  '</p><span class="list-address">'+
  locations[i][5]+
  ', <strong>'+
  locations[i][3]+
  '</strong>'+
  '</span><br><span class="list-phone">'+
  locations[i][4]+
  '</span></div><!--map-list-box-->';

document.getElementById("load_list").innerHTML = load_list_html;
</script>

<body>
<div id="load_list"></div> 
Order by<a id="alphBnt">Alphabetically ordered</a>
</body>

如何按标题的字母顺序对元素进行排序（#load list h3 a），我尝试了排序功能，但它不起作用。实现这一目标的最佳方法是什么？

【问题讨论】：

你可以使用<a onclick="sortAlphabetically()">...</a>调用一些javascript函数sortAlphabetically()（你需要写的）。
地址后面少了一个单引号...
您可以使用插件为您排序值，否则@Tro 说您可以随时编写函数sortAlphabetically()
嘿，如果您正在寻找一种对 HTML 进行排序的方法（而不是生成它的数组），请查看我的更新答案。

标签： javascript jquery sorting innerhtml

【解决方案1】：

Javascript 数组有一个内置的排序函数 - Array.sort。在数组数组的情况下，它们将按每个子数组的第一个元素排序。要按子数组中的另一个元素排序，您可以提供一个比较函数 -

$(document).ready(function() {
  var list = [
    [1, "b"],
    [2, "c"],
    [3, "a"]
  ];
  $("#originalresults").text(list.join(','));
  list.sort(function(a, b) {
    if (a[1] > b[1])
      return 1;
    if (a[1] < b[1])
      return -1;
    return 0;
  });
  $("#sortedresults").text(list.join(','));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="originalresults">
</div>
<div id="sortedresults">
</div>

所以在你的情况下，你会想要做类似 -

$("#alphBnt").click(function(){
    locations.sort(function(a, b) {
      if (a[1] > b[1])
        return 1;
      if (a[1] < b[1])
        return -1;
      return 0;
    });
    $("#load_list").clear();
    ........ generate your load_list_html using the code from your question
    $("#load_list").html(load_list_html);
});

编辑：

好的，我重新阅读了您的问题，看起来您可能正在寻找一种在 HTML 呈现后对其进行排序的方法。如果是这样，您应该能够做这样的事情-

$(document).ready(function() {
  $("#sorter").click(function() {
    var $sections = $("#container").children().detach();
    $sections.sort(function(a, b) {
      if ($(a).find("h5 span").text() > $(b).find("h5 span").text()) return 1;
      if ($(a).find("h5 span").text() < $(b).find("h5 span").text()) return -1;
      return 0;
    });
    $("#container").append($sections);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <section>
    <h5>
      <span>D</span>
    </h5>
    <p>
      Something about "D"....
    </p>
    <p>
      Something else
    </p>
  </section>
  <section>
    <h5>
      <span>A</span>
    </h5>
    <p>
      The letter "A" is the first letter of the alphabet.
    </p>
    <p>
      Something else
    </p>
  </section>
  <section>
    <h5>
      <span>C</span>
    </h5>
    <p>
      "C" is the first letter of many words.
    </p>
    <p>
      Something else
    </p>
  </section>
  <section>
    <h5>
      <span>B</span>
    </h5>
    <p>
      The word bee starts with the letter "B".
    </p>
    <p>
      Something else
    </p>
  </section>
</div>
<button id="sorter">Sort Them!</button>

【讨论】：

感谢@John C 的回答，实际上对数组进行排序对我来说似乎也是更好的解决方案。您的第一个解决方案效果很好，谢谢！