jQuery / Javascript - 根据Child Divs中的数字对父节点进行排序 [英] jQuery/Javascript - Sort Parent Divs Based on A number in Child Divs

问题描述

 < div class =article-container> 
 
< div class =article> 
< div class =article-child> views 9< / div> 
< / div> 
< div class =article> 
< div class =article-child> views 3< / div> 
< / div> 
< div class =article> 
< div class =article-child> views 5< / div> 
< / div> 
< div class =article> 
< div class =article-child> views 10< / div> 
< / div> 
< div class =article> 
< div class =article-child> views 1< / div> 
< / div> 
 
< / div> 
  

使用jQuery，我如何克隆/复制粘贴文章div以升序/来自他们孩子价值的数字的降序。所以我得到这样的结果。

 < div class =article-container> 
 
< div class =article> 
< div class =article-child> views 10< / div> 
< / div> 
< div class =article> 
< div class =article-child> views 9< / div> 
< / div> 
< div class =article> 
< div class =article-child> views 5< / div> 
< / div> 
< div class =article> 
< div class =article-child> views 3< / div> 
< / div> 
< div class =article> 
< div class =article-child> views 1< / div> 
< / div> 
 
< / div> 
  

在编码之前，我正在为它准备算法。我知道如何在jQuery中编写代码并复制粘贴内容，但我不确定该如何实现。 试试这个：

  var cont = $（。article-container）; 
 var arr = $ .makeArray（cont.children（。article））; 
 
 arr.sort（函数（a，b）{
 var textA = + $（a）.find（'。article-child'）。text（）; 
 var textB = + $（b）.find（'。article-child'）。text（）; 
 
 if（textA< textB）return 1; 
 if（textA> textB）返回-1; 
 
返回0; 
}）; 
 
 cont.empty（）; 
 
 $ .each（arr，function（）{
 cont.append（this）; 
}）; 
  

请参阅 demo here

---

如果您必须考虑文字，你应该使用正则表达式：

  var cont = $（。article-container）; 
 var arr = $ .makeArray（cont.children（。article））; 
 
 arr.sort（function（a，b）{
 var textA = + $（a）.find（'。article-child'）。text（）。match（/ views （\d +）/）[1]; 
 var textB = + $（b）.find（'。article-child'）.text（）。match（/ views（\d +）/）[ 1]; 
 
 if（textA< textB）return 1; 
 if（textA> textB）return -1; 
 
 return 0; 
}）; 
 
 cont.empty（）; 
 
 $ .each（arr，function（）{
 cont.append（this）; 
}）; 
  

请参阅 demo here

Lets say we have the following html div structure.

 <div class="article-container">

      <div class="article">
         <div class="article-child">views 9</div>
      </div>
      <div class="article">
         <div class="article-child">views 3</div>
      </div>
      <div class="article">
         <div class="article-child">views 5</div>
      </div>
      <div class="article">
         <div class="article-child">views 10</div>
      </div>
      <div class="article">
         <div class="article-child">views 1</div>
      </div>

 </div>

Using jQuery, how can I just clone/copy-paste the "article" divs in the ascending/descending order of the number coming in their children values. So I get result like this.

 <div class="article-container">

      <div class="article">
         <div class="article-child">views 10</div>
      </div>
      <div class="article">
         <div class="article-child">views 9</div>
      </div>
      <div class="article">
         <div class="article-child">views 5</div>
      </div>
      <div class="article">
         <div class="article-child">views 3</div>
      </div>
      <div class="article">
         <div class="article-child">views 1</div>
      </div>

 </div>

I was trying to prepare algorithm for it before I code. I know how to code in jQuery and the copy paste stuff but I am not sure how would I achieve this.

解决方案

You can try this:

var cont = $(".article-container");
var arr = $.makeArray(cont.children(".article"));

arr.sort(function(a, b) {
  var textA = +$(a).find('.article-child').text();
  var textB = +$(b).find('.article-child').text();

  if (textA < textB) return 1;
  if (textA > textB) return -1;

  return 0;
});

cont.empty();

$.each(arr, function() {
    cont.append(this);
});

See demo here

---

If you must consider the text, you should use a regexp:

var cont = $(".article-container");
var arr = $.makeArray(cont.children(".article"));

arr.sort(function(a, b) {
  var textA = +$(a).find('.article-child').text().match(/views (\d+)/)[1];
  var textB = +$(b).find('.article-child').text().match(/views (\d+)/)[1];

  if (textA < textB) return 1;
  if (textA > textB) return -1;

  return 0;
});

cont.empty();

$.each(arr, function() {
    cont.append(this);
});

See demo here

这篇关于jQuery / Javascript - 根据Child Divs中的数字对父节点进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！