Question

我正在尝试根据子范围中的数字对div进行排序。

现在，我正在尝试根据SPAN中具有“点”类的值对具有“团队”类的DIV进行排序。

但是当我触发排序时什么也没发生。

///多余的文字会绕开代码与文字的比例// // Lorem ipsum dolor atmet，方便地贴近精英。 Donec ornare ac ante amet rutrum。 Vestibulum tincidunt lacinia nibh坐在dignissim。整数eu tempor lorem。 Sed nec ultrices dolor，ac placerat lacus。 Etiam ac laoreet purus。 Nam pulvinar ligula dictum，faucibus magna sed，eleifend nunc。 Pellentesque nibh ipsum，在矢状头的cicidunt进入矢状面。 Proin sem magna，rutrum id suscipit ut，leo的sodales。

jQuery.fn.orderBy = function(keySelector)
    {
        return this.sort(function(a,b)
        {
            a = keySelector.apply(a);
            b = keySelector.apply(b);
            if (a > b)
                return 1;
            if (a < b)
                return -1;
            return 0;
        });
    };

var collection = $(".team");

    $("#sort").on('click', function(event){
      collection.each(function() {
        $(this).orderBy(function() {return +$(this).next('.points').text();}).appendTo($(this).closest('.group_table'));
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="group_table">
    <div>
      <h1>FOO</h1>      
      </div>
      <div>
        <span style="border-bottom:1px solid #000;">points</span>
      </div>
      
      <div class="team">      
        <span>Cucumber</span>
        <span class="points" id="p1r1">6</span>
      </div>
      
      <div class="team">      
        <span>Bacon</span>
        <span class="points" id="p2r1">3</span>
      </div>
      
      <div class="team">      
        <span>Chicken</span>
        <span class="points" id="p3r1">0</span>
      </div>
      
      <div class="team">      
        <span>Porridge</span>
        <span class="points" id="p4r1">9</span>
      </div>
  </div>
  
  <div class="group_table">
    <div>
      <h1>BAR</h1>      
      </div>
      <div>
        <span style="border-bottom:1px solid #000;">points</span>
      </div>
      
      <div class="team">      
        <span>Cucumber</span>
        <span class="points" id="p1r2">3</span>
      </div>
      
      <div class="team">      
        <span>Bacon</span>
        <span class="points" id="p2r2">0</span>
      </div>
      
      <div class="team">      
        <span>Chicken</span>
        <span class="points" id="p3r2">9</span>
      </div>
      
      <div class="team">      
        <span>Porridge</span>
        <span class="points" id="p4r2">6</span>
      </div>
  </div>
</div>
<button style="margin-top: 2em;" id="sort">SORT ALL</button>

Answer 1

请勿为此使用jquery。该平台如今功能强大。

简短说明：

获取所有.group_table并调用sortByPoints()函数
获取所有.team，然后将nodeList转换为数组。
parseInt()点的内容，并按其对数组进行排序。
对于现在产生的排序数组中的每个项目，将其附加到当前.group_table

最后一步是这样的，因为当您添加已在dom中的项目时，它将从其原始位置中删除...

sort.addEventListener("click", evt => {
  document.querySelectorAll(".group_table").forEach(item => {
    sortByPoints(item)
  })
})


function sortByPoints(element) {
  Array.from(element.querySelectorAll(".team")).sort((a, b) => {
    return parseInt(a.querySelector(".points").textContent) - parseInt(b.querySelector(".points").textContent)
  }).forEach(item => {
    element.appendChild(item)
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="group_table">
    <div>
      <h1>FOO</h1>
    </div>
    <div>
      <span style="border-bottom:1px solid #000;">points</span>
    </div>

    <div class="team">
      <span>Cucumber</span>
      <span class="points" id="p1r1">6</span>
    </div>

    <div class="team">
      <span>Bacon</span>
      <span class="points" id="p2r1">3</span>
    </div>

    <div class="team">
      <span>Chicken</span>
      <span class="points" id="p3r1">0</span>
    </div>

    <div class="team">
      <span>Porridge</span>
      <span class="points" id="p4r1">9</span>
    </div>
  </div>

  <div class="group_table">
    <div>
      <h1>BAR</h1>
    </div>
    <div>
      <span style="border-bottom:1px solid #000;">points</span>
    </div>

    <div class="team">
      <span>Cucumber</span>
      <span class="points" id="p1r2">3</span>
    </div>

    <div class="team">
      <span>Bacon</span>
      <span class="points" id="p2r2">0</span>
    </div>

    <div class="team">
      <span>Chicken</span>
      <span class="points" id="p3r2">9</span>
    </div>

    <div class="team">
      <span>Porridge</span>
      <span class="points" id="p4r2">6</span>
    </div>
  </div>
</div>
<button style="margin-top: 2em;" id="sort">SORT ALL</button>

Answer 2

使用jQuery

vowels :: [Char]
vowels = "aeiou"

jQuery.fn.orderBy = function(keySelector) {
  $(this).sort(function(a, b) {
    return parseInt($(a).find(keySelector).text()) > parseInt($(b).find(keySelector).text());
  }).appendTo($(this).parent());
};

$("#sort").on('click', function(event) {
  $(".group_table").each(function() {
    $(this).find('.team').orderBy('.points');
  })
})

按SPAN中的数字对DIV排序

2 个答案: