如何根据特定div中的文本对DOM元素进行排序？

Question

I'm trying to create a simple reddit clone using jQuery and JS. I've created a form where a user can submit a title and content for a "post" via a form. Furthermore, every post comes with an interactive little voting div.

I've hardcoded the first three posts into the HTML (as shown below).

<div class="panel panel-default" id="formStuff">
          <div class="form-group">
            <label for="title">Title </label> </label>
            <input type="title"  id="title" class="form-control">
          </div>
          <div class="form-group">
            <label for="content">Content </label>
            <textArea rows="5" type="content" id="content" class="form-control"></textArea>
          </div>
          <input type="submit" class="btn btn-success" id="subbtn">
     </div>

    <div class="wrapper">
        <div class="panel panel-default">
          <div class="vote">
            <p class='button plus'><i class="fa fa-arrow-up" aria-hidden="true"></i></p><p class='count'>0</p><p class='button minus'><i class="fa fa-arrow-down" aria-hidden="true"></i>
            </p>
          </div>
          <div class="pic">
              <img src="https://upload.wikimedia.org/wikipedia/en/8/84/AtlasShrugged.jpg">
          </div>
          <h3 id="aShrugged">Atlas Shrugged</h3>
          <p>Ayn Rand's objectivism adopted by US president Donald Trump. A crusade of eugenics begins anew.</p>
        </div>  
    </div>
    <div class="wrapper">
        <div class="panel panel-default">
          <div class="vote">
            <p class='button plus'><i class="fa fa-arrow-up" aria-hidden="true"></i></p><p class='count'>0</p><p class='button minus'><i class='fa fa-arrow-down' aria-hidden='true'></i>
            </p>
          </div>
          <div class='pic'>
              <img src='https://upload.wikimedia.org/wikipedia/en/8/84/AtlasShrugged.jpg'>
          </div>
          <h3 id="aShrugged">Atlas Shrugged</h3>
          <p>Ayn Rand's objectivism adopted by US president Donald Trump. A crusade of eugenics begins anew.</p>
        </div>  
    </div>
   <div class="wrapper">
        <div class="panel panel-default">
          <div class="vote">
            <p class='button plus'><i class="fa fa-arrow-up" aria-hidden="true"></i></p><p class='count'>0</p><p class='button minus'><i class="fa fa-arrow-down" aria-hidden="true"></i>
            </p>
          </div>
          <div class="pic">
              <img src="https://upload.wikimedia.org/wikipedia/en/8/84/AtlasShrugged.jpg">
          </div>
          <h3 id="aShrugged">Atlas Shrugged</h3>
          <p>Ayn Rand's objectivism adopted by US president Donald Trump. A crusade of eugenics begins anew.</p>
        </div>  
    </div>

Since I want to arrange the divs based on the number of votes (highest to lowest) dynamically, how can I go about doing this? Currently, I am trying to implement a linear search that searches for the highest number and sorts them out. Still, I think there has to be an easier way.. Any help or ideas are appreciated :)

My code/pseudocode: (linear search for div with highest number of votes, then move it to the necessary place by swapping divs)

for (var j = 0; j < ($(".wrapper").length - 1); j++) {

  var largestNum = Number($(".count")[j].childNodes[0].nodeValue);
  var content2 = $(".wrapper").eq(j).html();
  var content2 = $(
  for (var i = 0; i < ($(".wrapper").length - 1); i++)
  {
      if largestNum >= Number($(".count")[j + 1].childNodes[0].nodeValue)
          largestNum  stays the same
      else if largestNum < Number($(".count")[j +     
            1].childNodes[0].nodeValue)
          largestNum = Number($(".count")[j + 1].childNodes[0].nodeValue);
  }

  if ( largestNum === Number($(".count")[j].childNodes[0].nodeValue) ) { if    
the first count is largest, keep it in its current spot}
  else {
      var content1 = $(".wrapper").eq(j).html();
      var content2 = largestNum.eq(j).html();  //the wrapper where this count is located
    //find which div corresponds to the count number
     //$(".count:first").parents().eq(2).html() - gives html of parents two levels up
    $(".wrapper").eq(j).html(content2);
    largestNum(content1)    
}

}   

Answer 1

Presumably your actual page will be dynamic and pull data from a database of some kind. Honestly, you'd do much better to sort the dataset itself prior to generating the html output. How you do that will depend on how you store your data and the format you retrieve it in

That said, if you really want to do this in the DOM, (like re-sorting after a vote is cast) you could use the .sort() function like the below. Note that to make this work more easily, I have added <div class="wrapper-group"> as a wrapper around the wrapper divs:

 function sortWrappers() { // function to sort the DOM var $wrapperGroup = $('.wrapper-group'), $wrappers = $wrapperGroup.find('.wrapper'); $wrappers.sort(function(a, b) { var an = Number($(a).find('.count').text()); var bn = Number($(b).find('.count').text()); if (an > bn) return -1; if (an < bn) return 1; return 0; }); $wrappers.detach().appendTo($wrapperGroup); } $(function() { // wait till dom loads to add handler $(document).on('click', '.vote .button', function() { // handler to add or subtract votes ans call funtion to re-sort var $this = $(this); var $countDiv = $this.closest('.vote').find('.count'); var count = Number($countDiv.text()); var shouldAdd = $this.hasClass('plus'); count = shouldAdd ? count + 1 : count - 1; // add or subtract based on button pushed $countDiv.text(count); sortWrappers(); }); sortWrappers(); // call function here to sort divs once on page load }); 

 .vote .button { cursor: pointer; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default" id="formStuff"> <div class="form-group"> <label for="title">Title</label> <input type="title" id="title" class="form-control"> </div> <div class="form-group"> <label for="content">Content</label> <textArea rows="1" type="content" id="content" class="form-control"></textArea> </div> <input type="submit" class="btn btn-success" id="subbtn"> </div> <div class="wrapper-group"> <div class="wrapper"> <div class="panel panel-default"> <div class="vote"> <p class='button plus'><i class="fa fa-arrow-up" aria-hidden="true"></i> </p> <p class='count'>2</p> <p class='button minus'><i class="fa fa-arrow-down" aria-hidden="true"></i> </p> </div> <div class="pic"> <img src="https://upload.wikimedia.org/wikipedia/en/8/84/AtlasShrugged.jpg"> </div> <h3 id="aShrugged">Atlas Shrugged</h3> <p>Ayn Rand's objectivism adopted by US president Donald Trump. A crusade of eugenics begins anew.</p> </div> </div> <div class="wrapper"> <div class="panel panel-default"> <div class="vote"> <p class='button plus'><i class="fa fa-arrow-up" aria-hidden="true"></i> </p> <p class='count'>3</p> <p class='button minus'><i class='fa fa-arrow-down' aria-hidden='true'></i> </p> </div> <div class='pic'> <img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ8n3ycTsYghXZls7NdBULWq0xqE4OW5G_cdYvNG4hcEAZVdCyHuQ'> </div> <h3 id="aShrugged">Atlas Shrugged</h3> <p>Ayn Rand's objectivism adopted by US president Donald Trump. A crusade of eugenics begins anew.</p> </div> </div> <div class="wrapper"> <div class="panel panel-default"> <div class="vote"> <p class='button plus'><i class="fa fa-arrow-up" aria-hidden="true"></i> </p> <p class='count'>5</p> <p class='button minus'><i class="fa fa-arrow-down" aria-hidden="true"></i> </p> </div> <div class="pic"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTjGUgGlwA_F-fmbMqrUbHcZMKHuGLPi3DP8mZH5fLOCQZjfyTKTQ"> </div> <h3 id="aShrugged">Atlas Shrugged</h3> <p>Ayn Rand's objectivism adopted by US president Donald Trump. A crusade of eugenics begins anew.</p> </div> </div> </div>