javascript - 如何查找所有数字类 jQuery

Question

有没有办法用 jQuery 找到所有数字类？

我有以下类的元素:

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

但是，我使用的是 jQuery 可拖动用户界面。所以这些占位符是可拖动的，最终这些数字类将以随机顺序排列，例如(3、0、2、1)，并且如果我使用 将不再与 index 匹配.each 函数。

基本上，在页面加载时，元素的顺序为 0、1、2、3 ...(基于数据库中的结果数量)。

他们可以乱来，这将导致随机顺序(0、3、2、1，...)。但是有一个默认按钮。使用此按钮，他们可以撤消所有操作，并重置默认顺序。

我尝试了以下方法，但这没有用，因为 index 与数字类不匹配，如果它们乱七八糟(他们显然会这样做)。

$(".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
});

非常感谢任何帮助!!

Answer 1

如评论中所述，您应该使用 data-* 属性来存储索引。如果这不可能，您可以从 classList 中提取数字类名。

1. 您可以使用sort 对元素进行排序
2. 要从元素中提取数字类名，您可以使用正则表达式，/\b(\d+)\b/
3. 然后可以在未排序的元素上替换排序列表

演示

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

---

使用数据索引

$('#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>