All geek questions in one place

Javascript sort a DOM element in alphabetical order using innerHTML

I am loading html from a JavaScript array using innerHTML. I would like to sort it alphabetically if I click on the anchor tag. How can i do this? My code is pretty complicated, but for the question this is the important part:

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

How can I sort the elements alphabetically by name, (#load list h3 a), I tried the sort function, but that didn't work. What is the best way to achieve this?

+4
source share
1 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>
Hide result

, - :

$("#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);
});

EDIT:

, , , 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>
Hide result
+1

Source: https://habr.com/ru/post/1606372/

More articles:


All Articles