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 draggable ui。因此，这些占位符是可拖动的，并且最终这些数字类将以随机顺序（例如，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中提取数字类名。

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

<强>演示

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

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

除了Tushar的回答并遵循Niet the Dark Absol的评论，以下是使用数据属性的方法。如果可以的话，data- *属性应该是首选，而不是使用数字类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何查找所有数字类jQuery

2 个答案: