Javascript to sort elements

Question

I've need to sort some items on the page where the CMS I use doesn't provide for this. I can add some tags dynamically, but I need help here with some Javascript that would put the items in the correct order.

Further at the top of the HTML page I've got an 'event selector', e.g.:

<div class="w-embed">
    <div event-selector="weddings"></div>
</div>

This would determine which set of the sorting numbers to use. Each item includes some code with a sort number from each set. w-dyn-item are the elements that need sorting.

<div class="w-dyn-list">
  <div class="w-dyn-items">

    <div class="w-dyn-item">
      <div class="w-embed">
        <div sort-event="conference" sort="09"></div>
        <div sort-event="exhibition" sort="110"></div>
        <div sort-event="wedding" sort="2"></div>
      </div>
      <div>
        Content A
      </div>
    </div>

    <div class="w-dyn-item">
      <div class="w-embed">
        <div sort-event="conference" sort="06"></div>
        <div sort-event="exhibition" sort="60"></div>
        <div sort-event="wedding" sort="1"></div>
      </div>
      <div>
        Content B
      </div>
    </div>

    <div class="w-dyn-item">
      <div class="w-embed">
        <div sort-event="conference" sort="01"></div>
        <div sort-event="exhibition" sort="54"></div>
        <div sort-event="wedding" sort="3"></div>
      </div>
      <div>
        Content C
      </div>
    </div>

  </div>
</div>

The logic would be: Sort w-dyn-item elements by using the 'sort-event' numbers that correspond to the 'event-selector' (from smallest to largest number).

The site's using jQuery if that's any help.

I've put it into a Fiddle here: https://jsfiddle.net/j2rqze8p

Many thanks for any help.

Answer 1

Here is how you can actually sort the elements with jQuery.

var sortPropertyName = $('.w-embed [event-selector]').attr('event-selector');
var sortAttrValues = {
	'weddings': 'wedding',
	'exhibitions': 'exhibition',
	'conferences': 'conference'
};
var sortAttributeValue = sortAttrValues[sortPropertyName];

if(!sortAttributeValue) {
	throw new Error('Unable to sort. Sort attribute value not found.')
}

var attrSelector = '[sort-event="' + sortAttributeValue + '"]';

var $container = $('.w-dyn-items');
var $items = $container.children('.w-dyn-item');

$items.sort(function (item1, item2) {
	var item1Value = $(item1).find(attrSelector).attr('sort');
	var item2Value = $(item2).find(attrSelector).attr('sort');

	return parseInt(item1Value) - parseInt(item2Value);

});

$items.detach().appendTo($container);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="w-dyn-list">
	<div class="w-embed">
		<div event-selector="weddings"></div>
	</div>


	<div class="w-dyn-items">

		<div class="w-dyn-item">
			<div class="w-embed">
				<div sort-event="conference" sort="09"></div>
				<div sort-event="exhibition" sort="110"></div>
				<div sort-event="wedding" sort="2"></div>
			</div>
			<div>
				Content A
			</div>
		</div>

		<div class="w-dyn-item">
			<div class="w-embed">
				<div sort-event="conference" sort="06"></div>
				<div sort-event="exhibition" sort="60"></div>
				<div sort-event="wedding" sort="1"></div>
			</div>
			<div>
				Content B
			</div>
		</div>

		<div class="w-dyn-item">
			<div class="w-embed">
				<div sort-event="conference" sort="01"></div>
				<div sort-event="exhibition" sort="54"></div>
				<div sort-event="wedding" sort="3"></div>
			</div>
			<div>
				Content C
			</div>
		</div>

	</div>
</div>

There are two moments. First, as I noticed the value of event-selector is plural whereas sort-event are singular. I solved this by having a hash to match one to another.

The another thing is that you might need to run this script on 'event-selector' change if you want the sort to by dynamic. But it's basically a matter of a different discussion.