Sorting DIVs by numbers in SPAN

Question

I'm Trying to get a sorting of divs based on a number in a child span.

Now I'm trying to sort the DIV with the class 'team' based on the value in the SPAN with the class 'points'.

But nothing happens when I trigger the sorting.

//Extra text get around code to text ratio // Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare ac ante sit amet rutrum. Vestibulum tincidunt lacinia nibh sit amet dignissim. Integer 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, sagittis eget sollicitudin in, tincidunt at tellus. Proin sem magna, rutrum id suscipit ut, sodales at leo.

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>

"//Extra text get around code to text ratio // Lorem ipsum dolor sit amet, ..." - Instead of finding work-arounds for implemented rules respect and try to fulfill them... — Andreas

Holger Will Holger Will · Accepted Answer · 2018-12-29T15:14:27

don't use jquery for this. the platform is powerful enough nowadays.

short description:

get all .group_tables and call the sortByPoints() function
get all .teams and turn the nodeList into an Array.
parseInt() the contents of the points and sort your Array by it.
for each item in the now resulting sorted array append it the current .group_table

the last step works like this, because when you append an item that is already in the dom it gets removed from it's original position...

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>

Sorting DIVs by numbers in SPAN

2 Answers