Sorting elements with jQuery using data attributes

Question

Just to let you know, I\'m a rookie. I try to programm a certain function for the menu-navigation on my website. (http://thomasmedicus.at/)

I want visitors on my website

Answer 1

I think you should leave vanilla JavaScript for later and use jQuery library to make your life much easier. Your website is already using it, so you don't have to adjust anything.

Here is a good example of sorting with jQuery jQuery sort elements using data id

All you need is to provide some criteria for sorting, the example above relies on data-attribute, which is really handy for this kind of functionality.

/** 
 * This function returns a callback for data-attribute based sorting.
 *
 * @param sortCriteria
 *   Name of the data-attribute for sorting.
 * @param itemsToSort
 *   A string selector for items for sorting.
 * @param container
 *   A container to put items.
 * @returns {Function}
 */
var sortByDataAttr = function(sortCriteria, itemsToSort, container) {
    return function() {

      // Grab all the items for sorting.
      var $collection = $(itemsToSort);

      // Sort them and append in to container.
      $collection.sort(function(a, b) {
        return $(a).data(sortCriteria) - $(b).data(sortCriteria)
      }).appendTo($(container));
    };
  },
  /**
   * Remove class from all elements and apply to current.
   *
   * @param current
   *   HTML node to apply class.
   * @param activeClass
   *   Active-state string class.
   */
  highlightActive = function(current, activeClass) {
    $('.' + activeClass).removeClass(activeClass);
    $(current).addClass(activeClass);
  };

// Sort by 'data-weight' at the start.
highlightActive('.btn-sort-weight', 'btn-sort--active');
sortByDataAttr('weight', '.item', '.list');

$('.btn-sort-weight').on('click', function() {
  highlightActive(this, 'btn-sort--active');
  sortByDataAttr('weight', '.item', '.list')();
});

$('.btn-sort-index').on('click', function() {
  highlightActive(this, 'btn-sort--active');
  sortByDataAttr('index', '.item', '.list')();
});

.btn {
  text-decoration: line-through;;
}

.btn-sort--active {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-sort-weight">Sort by weight</button>
<button class="btn btn-sort-index">Sort by index</button>
<ul class="list">
  <li class="item" data-index="133" data-weight="5">First - weight: 5 - index: 133</li>
  <li class="item" data-index="2" data-weight="1">Second - weight: 1 - index: 2</li>
  <li class="item" data-index="87" data-weight="16">Third - weight: 16 - index: 87</li>
</ul>

Answer 2

Refer to this site for sorting algorithms http://www.sorting-algorithms.com/. You should go by scalability to overcome future problems with sorting.Array.sort() is helpful. Check this fiddle http://jsfiddle.net/BF8LV/2/

    function sortAscending(data_A, data_B)
{
    return (data_A - data_B);
}
var array =[ 9, 10, 21, 46, 19, 11]
array.sort(sortAscending) 
alert(array);