Help with sorting elements on the page using JS

JavaScript
1

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.

2

Hello, this will do it.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<div class="w-embed">
  <div event-selector="wedding"></div>
</div>
<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>
<script
  src="https://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
<script>
var sortKey = $('div[event-selector]').attr('event-selector')
var items = $('.w-dyn-item').toArray()
var itemMap = items.map(function(el) {
  var sort = $(el).find('div[sort-event="' + sortKey + '"]').attr('sort')
  return {
    el: el,
    sort: sort
  }
}).sort(function(a,b) {
  if (a.sort < b.sort) { return -1 }
  if (a.sort > b.sort) { return 1 }
  return 0
})
var sortedItems = itemMap.map(function(item) {
  return item.el
})
$('.w-dyn-items').html()
$('.w-dyn-items').append(sortedItems)
</script>
</body>
</html>
  • Get the sortKey from event-selector
  • Get an an array of the items and the sort number for each
  • Sort by the sort number
  • Clear the list and append the sorted items
3

Hi @markbrown4 – that seems to work! :slight_smile:

Thank you soooooo much for helping me out here!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.