有没有办法用 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
});
非常感谢任何帮助!!
最佳答案
如评论中所述,您应该使用 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>
使用数据索引
$('#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>
关于javascript - 如何查找所有数字类 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33010602/