Question

这是我的HTML代码的简短示例：

<div id="feedDiv">
  <div class="articleDiv">
     <div id="pictureDiv">
     </div>
     <div id="ConentDiv">
           <h1> Headline </h1>
           <p> Description </p>
           <p class="toolbar">  
                <a class="thumbsUpNumber">86</a>
                <a class="thumbsDownNumber">79</a>
                <a class="commentNumber"> 32 </a> 
           </p>
     </div>
     <div id="UrlDiv">
     </div>
  </div>
</div>

我想根据每个工具栏的thumbsUpNumbers对#feedDiv中的#articleDivs进行数字排序。

我已经尝试过这样的事情：

var numericallyOrderedDivs = $(".articleDiv").sort(function (a, b) {
        return $(a).find(".thumbsUpNumber").text() > $(b).find(".thumbsUpNumber").text();
    });

    numericallyOrderedDivs.each(function (i, item) {
        $("#feedDiv").append(item);
    });

但是什么都不起作用...

Answer 1

您可以尝试以下方法：

var numericallyOrderedDivs = $(".articlesDiv").sort(function(a, b) {
  var contentA = parseInt($(a).find(".thumbsUpNumber").text());
  var contentB = parseInt($(b).find(".thumbsUpNumber").text());
  return (contentA > contentB) ? -1 : (contentA < contentB) ? 1 : 0;
});

numericallyOrderedDivs.each(function(i, item) {
  $("#feedDiv").append(item);
});

但是我不得不告诉你，你需要放慢速度，你的代码中有很多错误，这令人怀疑是否可行。

<div id="pictureDiv>末尾缺少"。与<div id="ConentDiv>，<div id="UrlDiv>

相同

演示

var numericallyOrderedDivs = $(".articlesDiv").sort(function(a, b) {
  var contentA = parseInt($(a).find(".thumbsUpNumber").text());
  var contentB = parseInt($(b).find(".thumbsUpNumber").text());
  return (contentA > contentB) ? -1 : (contentA < contentB) ? 1 : 0;
});

numericallyOrderedDivs.each(function(i, item) {
  $("#feedDiv").append(item);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="feedDiv">
  <div class="articlesDiv">
    <div class="pictureDiv">
    </div>
    <div class=" ConentDiv">
      <h1> Headline </h1>
      <p> Description </p>
      <p class="toolbar">
        <a class="thumbsUpNumber">86</a>
        <a class="thumbsDownNumber">79</a>
        <a class="commentNumber"> 32 </a>
      </p>
    </div>
    <div class="UrlDiv"></div>
  </div>
  <div class="articlesDiv">
    <div class="pictureDiv">
    </div>
    <div class=" ConentDiv">
      <h1> Headline </h1>
      <p> Description </p>
      <p class="toolbar">
        <a class="thumbsUpNumber">90</a>
        <a class="thumbsDownNumber">9</a>
        <a class="commentNumber"> 40 </a>
      </p>
    </div>
    <div class="UrlDiv"></div>
  </div>
</div>

根据childNode值对Divs进行排序

1 个答案: