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!!

Numeric classes are a bad idea. Use `data-index="1"` etc. instead. Data attributes are much more appropriate for this. — Niet the Dark Absol, Oct 08 '15 at 08:37
Yes, I concluded the same after i noticed the bug. But this would give me alot of debugging work. Thanks for the tip though. — Jeroen Bellemans, Oct 08 '15 at 08:41
Not to mention that `2` is [not a valid css value](http://stackoverflow.com/a/2812097/859154) — Royi Namir, Oct 08 '15 at 08:47

Tushar · Accepted Answer · 2015-10-08T09:29:55.770

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.

You can use sort to sort the elements
To extract the numeric classname from element you can use regex, /\b(\d+)\b/
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>

Just a remark on your edit: Originaly I just asked for how to find all numeric classes. Not how to find and sort them... — Jeroen Bellemans, Oct 08 '15 at 14:18
@JeroenBellemans Aah! And I thought you want to sort them, anyway, I will not update my answer now as it has answered your question and I've put efforts to achieve sorting :) — Tushar, Oct 08 '15 at 14:22
I'm very glad for your help, but it was concerning the title you edited. Thanks tho!! — Jeroen Bellemans, Oct 08 '15 at 14:27
@JeroenBellemans I realised that it should be the old one, rollbacked — Tushar, Oct 08 '15 at 14:28

score 0 · Answer 2 · answered Oct 08 '15 at 08:51

In addition to Tushar's answer and following Niet the Dark Absol's comment, here is how you would do it using a data attribute. If you can, data-* attributes should really be preferred instead of using numerical classes.

var divs = $(".placeholder").filter(function() {
  return $(this).attr("data-index") !== undefined;
});

divs.css("background-color", "green");

.placeholder {
  height: 10px;
  background-color: red;
}

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

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

How to find all numeric classes jQuery

2 Answers2