Sort List of Divs with Data Attribute with Radio Buttons Using Javascript

We can use Javascript and jQuery to sort a list of divs very easily by using the sort() Javascript function.

Being able to add sorting functionality to lists using Javascript and jQuery can be very beneficial for the user experience of a web page.

It is very common for a page to have a list of products, events, blogs, etc. which the user could want to sort or filter – depending on the purpose of the web page and the information you are trying to present.

In any case, being able to dynamically update the page using Javascript or JQuery can be very beneficial.

One way to be able to add sorting to a web page is to use a list of divs, add data attributes to each div, and then sort using input from a radio button group.

For example, let’s say you have a list of divs with some data attributes:

<div id="list-of-divs">
   <div class="div" data-number="1" data-name="d">d</div>
   <div class="div" data-number="2" data-name="b">b</div>
   <div class="div" data-number="3" data-name="c">c</div>
   <div class="div" data-number="4" data-name="a">a</div>
</div>

In this example, we want to use radio buttons to control the sorting functionality of these divs. We could create a few radio buttons like in code below. Note that we need to add the “onchange” attribute with the Javascript function we are going to write, and pass it this radio button.

<div class="radio-buttons">
   <span class="div-sort-title">Sort by:</span>
   <div class="div-sort-options">
      <span><input type="radio" onchange="radioSort(this)" value="number" name="radio-sort" checked /> Number</span>
      <span><input type="radio" onchange="radioSort(this)" value="ascending" name="radio-sort" />A - Z</span>
      <span><input type="radio" onchange="radioSort(this)" value="descending" name="radio-sort" />Z - A</span>
   </div>
</div>

Now, we need to add the sorting functionality.

Above, in the onchange attribute, we have that we will have a Javascript function called “radioSort”.

Using jQuery, we can easily create sorting functions for both text sorts and numeric sorts of data attributes.

Creating a Javascript sort function requires creating a function that takes two parameters and returns a callback with the desired way to sort.

For a numeric sort, this Javascript sorting function using jQuery is clean and has worked well for me in the past:

list.sort(function(a, b) {
    return parseInt($(b).data('attribute-name')) - parseInt($(a).data('attribute-name'));
})

For a character sort, we can use the String.prototype.localeCompare.call() function to compare two strings:

list.sort(function(a, b) {
    return String.prototype.localeCompare.call($(a).data('attribute-name').toLowerCase(), $(b).data('attribute-name').toLowerCase());
})

Now that we have both of these Javascript sorting functions using jQuery, we can create the full radio button sorting function.

To access the radio_value, we need to call .value on the element which has been passed to our radioSort function by the radio button.

Then, we need to check which value has been selected. After this, we get the list of divs, sort and then use the .html() jQuery function to add the newly sorted divs back to the parent div.

function radioSort(el) {
  var radio_value;
  radio_value= el.value;
  
  if (radio_value == "number") {
  	var divList = $(".div");
	divList.sort(function(a, b) {
	    return parseInt($(b).data('number')) - parseInt($(a).data('number'));
	});
	$("#list-of-divs").html(divList);
  } else if (radio_value== "ascending") {
	var divList = $(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call($(a).data('name').toLowerCase(), $(b).data('name').toLowerCase());
	});
	$("#list-of-divs").html(divList);
  } else if (radio_value  == "descending") {
  	var divList = $(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call($(b).data('name').toLowerCase(),$(a).data('name').toLowerCase());
	});
	$("#list-of-divs").html(divList);
  }	
}

If you are using WordPress, don’t forget to change the $ to jQuery as below:

function radioSort(el) {
  var radio_value;
  radio_value= el.value;
  
  if (radio_value == "number") {
  	var divList = jQuery(".div");
	divList.sort(function(a, b) {
	    return parseInt(jQuery(b).data('number')) - parseInt(jQuery(a).data('number'));
	});
	jQuery("#list-of-divs").html(divList);
  } else if (radio_value== "ascending") {
	var divList = jQuery(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call(jQuery(a).data('name').toLowerCase(), jQuery(b).data('name').toLowerCase());
	});
	jQuery("#list-of-divs").html(divList);
  } else if (radio_value  == "descending") {
  	var divList = jQuery(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call(jQuery(b).data('name').toLowerCase(),jQuery(a).data('name').toLowerCase());
	});
	jQuery("#list-of-divs").html(divList);
  }	
}

In this example, I used jQuery because of how clean it is. A pure Javascript solution is of course possible, but would be more messy with how you get the children divs and how you add it back to the parent divs.

The final code and output for this example of how to use radio buttons to sort a list of divs using Javascript and jQuery is below:

HTML Code Output:

Full Code:

<div id="list-of-divs">
   <div class="div" data-number="1" data-name="d">d</div>
   <div class="div" data-number="2" data-name="b">b</div>
   <div class="div" data-number="3" data-name="c">c</div>
   <div class="div" data-number="4" data-name="a">a</div>
</div>
<div class="radio-buttons">
   <span class="div-sort-title">Sort by:</span>
   <div class="div-sort-options">
      <span><input type="radio" onchange="radioSort(this)" value="number" name="radio-sort" checked /> Number</span>
      <span><input type="radio" onchange="radioSort(this)" value="ascending" name="radio-sort" />A - Z</span>
      <span><input type="radio" onchange="radioSort(this)" value="descending" name="radio-sort" />Z - A</span>
   </div>
</div>

<script>

function radioSort(el) {
  var radio_value;
  radio_value= el.value;
  
  if (radio_value == "number") {
  	var divList = $(".div");
	divList.sort(function(a, b) {
	    return parseInt($(b).data('number')) - parseInt($(a).data('number'));
	});
	$("#list-of-divs").html(divList);
  } else if (radio_value== "ascending") {
	var divList = $(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call($(a).data('name').toLowerCase(), $(b).data('name').toLowerCase());
	});
	$("#list-of-divs").html(divList);
  } else if (radio_value  == "descending") {
  	var divList = $(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call($(b).data('name').toLowerCase(),$(a).data('name').toLowerCase());
	});
	$("#list-of-divs").html(divList);
  }	
}

</script>