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

Question

我正在尝试使用 jQuery 和 JS 创建一个简单的 reddit 克隆。我创建了一个表单，用户可以在其中通过表单提交“帖子”的标题和内容。此外，每个帖子都带有一个互动的小投票 div。

我已将前三个帖子硬编码到 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>