Reorder child elements using data attribute and apply show/hide

Question

I'm using the following html/jquery to re-order the child elements of a containing div, based on their data-price attribute.

<div id="parent_div">
 <div class="child_div" data-price="102">Item x</div>
 <div class="child_div" data-price="95">Item y</div>
 <div class="child_div" data-price="210">Item z</div>
</div>

The HTML is populated by multiple AJAX calls and so the initial results are not ordered, and could number 50+ child elements. Once the AJAX calls are complete and HTML populated, I am running the following jquery:

function giveFormatOrder(parent_div, child_div) {

 var $wrapper = $(parent_div);

 $wrapper.find(child_div).sort(function(a, b) {
  return +a.getAttribute('data-price') - +b.getAttribute('data-price');
 })
 .appendTo($wrapper);
}

giveFormatOrder('#parent_div','.child_div');

This works fine. But I would like to hide all but the first 10 ordered child elements. Is there a way I can modify the jquery function to achieve this, by adding a counter and adding a show/hide class? Or do I need to trigger a second function once the sort is complete? I'm looking for the most performant approach possible but am not sure how to go about it.

You can hide the items after the 10th using css - see https://stackoverflow.com/a/11851465/863110. — Mosh Feu, Oct 13 '20 at 10:39

score 1 · Answer 1 · answered Oct 13 '20 at 10:53

You can do it by using .slice(10).hide();

Demo

The demo only show the 2 first.

function giveFormatOrder(parent_div, child_div) {

  var $wrapper = $(parent_div);

  $wrapper.find(child_div).sort(function(a, b) {
      return +a.getAttribute('data-price') - +b.getAttribute('data-price');
    })
    .appendTo($wrapper).slice(2).hide();
}

giveFormatOrder('#parent_div', '.child_div');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent_div">
  <div class="child_div" data-price="102">Item x</div>
  <div class="child_div" data-price="95">Item y</div>
  <div class="child_div" data-price="210">Item z</div>
</div>

score 1 · Accepted Answer · answered Oct 13 '20 at 10:56

By slice and append using jquery.

Note: The hidden children not available in DOM

function giveFormatOrder(parent_div, child_div) {
  var $wrapper = $(parent_div);

  $wrapper.find(child_div).detach().sort(function(a, b) {
      return $(a).data('price') - $(b).data('price');
    }).slice(0, 3).appendTo($wrapper);
}

giveFormatOrder('#parent_div', '.child_div');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="parent_div">
  <div class="child_div" data-price="102">Item x 102</div>
  <div class="child_div" data-price="95">Item y 95</div>
  <div class="child_div" data-price="210">Item z 210</div>
  <div class="child_div" data-price="110">Item z 110</div>
  <div class="child_div" data-price="10">Item z 10</div>
  <div class="child_div" data-price="140">Item z 140</div>
</div>

Reorder child elements using data attribute and apply show/hide

2 Answers2