How to find all numeric classes jQuery

Question

Is there any way to find all numeric classes with jQuery?

I have elements with the following classes:

<div class="placeholder 0 original dropped default-load"></div>
<div class="placeholder 1 original dropped default-load"></div>
<div class="placeholder 2 original dropped default-load"></div>
<div class="placeholder 3 original dropped default-load"></div>

But, I'm using jQuery draggable ui. So those placeholders are draggable, and eventualy those numeric classes will be in a random order eg (3, 0, 2, 1), and will no longer match with the index if I use the .each function.

So basicly, on pageload, the elements will have the order as 0, 1, 2, 3, ... (based on amount of results in the database).

They can mess around and this will result in a random order (0, 3, 2, 1, ...). But there is a default button. With this button they can undo all there actions, and reset the default order.

I tried with the following but this didn't work as the index doesn't match with the numeric class if they mess around (which they will obviously will).

$(".default").click(function (e) {
    e.preventDefault();
    $("li.placeholder").each(function (index) {
        $(this).empty();
        $(this).removeClass(index);
        $(this).removeClass("dropped");
        $(this).removeClass("default-load");
        if (!($(this).hasClass("original"))) {
            $(this).remove();
        }
        $(".modal-" + index).remove();
    });
    init(); // Callback
});

Any help is greatly appreciated!!

Answer 1

As said in the comments, you should use data-* attribute to store the index. If that is not possible, you can extract the numeric classname from classList.

1. You can use sort to sort the elements
2. To extract the numeric classname from element you can use regex, /\b(\d+)\b/
3. The sorted list can be then replaced on the unsorted elements

Demo

// This will extract the numeric classname
function getNumericClassname(el) {
  return ($(el).attr('class').match(/\b(\d+)\b/) || [])[1];
}

$('#sort').on('click', function() {
  var sortedData = $('.placeholder').sort(function(a, b) {
    return getNumericClassname(a) - getNumericClassname(b);
  });

  $('#container').html(sortedData);
});

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

<div id="container">
  <div class="placeholder 0 original dropped default-load">0</div>

  <div class="placeholder 2 original dropped default-load">2</div>

  <div class="placeholder 1 original dropped default-load">1</div>
  <div class="placeholder 3 original dropped default-load">3</div>
</div>

<button id="sort">Sort</button>

---

Using data-index

$('#sort').on('click', function() {
  var sortedData = $('.placeholder').sort(function(a, b) {
    return $(a).data('index') - $(b).data('index');
  });

  $('#container').addClass('sorted').html(sortedData);
});

.placeholder {
  color: white;
  background: red;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  width: 100px;
  height: 100px;
  float: left;
  margin: 5px;
  line-height: 100px;
}
.sorted .placeholder {
  background: green;
}
button {
  display: block;
  clear: both;
  margin: 5px;
}

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

<div id="container">
  <div class="placeholder original dropped default-load" data-index="3">3</div>
  <div class="placeholder original dropped default-load" data-index="0">0</div>
  <div class="placeholder original dropped default-load" data-index="2">2</div>
  <div class="placeholder original dropped default-load" data-index="1">1</div>

</div>

<button id="sort">Sort</button>