Question

我正在使用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），我已经尝试过排序功能，但它没有用。实现这一目标的最佳方法是什么？

Answer 1

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

＆＃13;

$(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(','));
});

＆＃13;

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

＆＃13;

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

$("#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后对其进行排序的方法。如果是这样，你应该可以做这样的事情 -

＆＃13;
＆＃13;
$(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); }); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

javascript使用innerHTML按字母顺序排序DOM元素

1 个答案: