使用innerHTML按字母顺序对DOM元素进行JavaScript排序

Question

使用innerHTML按字母顺序对DOM元素进行JavaScript排序

4

我正在使用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）？我使用了sort函数，但它没有起作用。实现这一目标最好的方法是什么？

- Chuchy

1

你可以使用 <a onclick="sortAlphabetically()">...</a> 来调用一些 JavaScript 函数 sortAlphabetically()（需要你自己编写）。 - Tro

您在地址后面漏掉了一个单引号... - vanntile

你可以使用插件来为你排序，或者像@Tro说的那样，你可以编写一个函数sortAlphabetically()。 - joyBlanks

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - John C

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John C · Accepted Answer

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>