如何根據特定div中的文本對DOM元素進行排序？

Question

我正在嘗試使用jQuery和JS創建一個簡單的reddit克隆。 我創建了一個表單，用戶可以在其中通過表單提交“帖子”的標題和內容。 此外，每個帖子都帶有一個互動式小投票區。

我已經將前三篇文章硬編碼到HTML中（如下所示）。

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

由於我想根據投票數（從高到低）動態排列div，我該怎么做？ 目前，我正在嘗試實施線性搜索，以搜索最大的數字並進行排序。 不過，我認為必須有一種更簡單的方法。任何幫助或想法都表示贊賞：）

我的代碼/偽代碼：（線性搜索投票數最高的div，然后通過交換div將其移動到必要的位置）

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

假設您的實際頁面是動態的，並且會從某種數據庫中提取數據。 老實說，在生成html輸出之前，您最好對數據集本身進行排序。 如何執行將取決於您存儲數據的方式以及檢索數據的格式

就是說，如果您真的想在DOM中執行此操作（例如在投票后重新排序），則可以使用.sort()函數，如下所示。 請注意，為使此工作更輕松，我添加了<div class="wrapper-group">作為包裝div的包裝：

 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>