How to find all numeric classes jQuery

455
November 22, 2016, at 10:03 AM

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>

Answer 2

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>

Rent Charter Buses Company
READ ALSO
Printing HTML Attritbutes with jquery in a loop

Printing HTML Attritbutes with jquery in a loop

i try to loop trough Objects in a Database (parse. com) and would like to print these results with attributes from Bootstrap.

295
Need help parsing jquery datatables editor data

Need help parsing jquery datatables editor data

I have a data format that I receive from jquery data tables editor Datatables Editor which looks like the one below and I need to parse it so that I can store it into db but I have not figured out a way of doing so. .

379
Disable browser&#39;s autocomplete textboxes in asp.net c#

Disable browser's autocomplete textboxes in asp.net c#

How to disable browser's autocomplete effect on all textboxes in asp. net c# application.

417