我正在尝试用jQuery对div进行排序,我有这个html:
<div id="container">
<button type="button" id="sort">sort</button>
<div class="entry" id="lala">
<a target="_blank" href="http://lala">lala</a>
<span class="times">4</span>
</div>
<div class="entry" id="lele">
<a target="_blank" href="http://lele.com">lele.com</a>
<span class="times">1</span>
</div>
<div class="entry" id="lolo">
<a target="_blank" href="http://lolo">lolo.com</a>
<span class="times">2</span>
</div>
</div>
我想使用“times”类来对“entry”div进行排序。我的javascript函数不起作用,因为a.child is undefined
:
$( document ).ready(function() {
$( "#add" ).click(function() {
var elems = $('#container').children('.entry').remove();
elems.sort(function(a,b){
var valueA = parseInt(a.children(".times").text());
var valueB = parseInt(b.children(".times").text());
return (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
});
$('#container').append(elems);
});
});
谢谢;)
答案 0 :(得分:0)
我终于使用了另一种方法。我在data-sort
div中创建了属性.entry
,我使用了这个javascript函数:
$( document ).ready(function() {
$( "#add" ).click(function() {
var elems = $('#container').children('.entry').remove();
elems.sort(function(a,b){
var a = parseInt($(a).attr("data-sort"));
var b = parseInt($(b).attr("data-sort"));
return (a > b) ? -1 : (a < b) ? 1 : 0;
});
$('#container').append(elems);
});
});
我仍然不知道如何使用标记值对div进行排序,但这种方法确实有效。
答案 1 :(得分:0)
有一个小插件available here可让您轻松完成以下操作:
$('#sort').click(function() {
$('.entry').sortElements(function(a, b) {
return $(a).find('.times').text() > $(b).find('.times').text() ? 1 : -1;
});
});
/**
* jQuery.fn.sortElements
* --------------
* @param Function comparator:
* Exactly the same behaviour as [1,2,3].sort(comparator)
*
* @param Function getSortable
* A function that should return the element that is
* to be sorted. The comparator will run on the
* current collection, but you may want the actual
* resulting sort to occur on a parent or another
* associated element.
*
* E.g. $('td').sortElements(comparator, function(){
* return this.parentNode;
* })
*
* The <td>'s parent (<tr>) will be sorted instead
* of the <td> itself.
*/
jQuery.fn.sortElements = (function() {
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function() {
return this;
};
var placements = this.map(function() {
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
// Since the element itself will change position, we have
// to have some way of storing its original position in
// the DOM. The easiest way is to have a 'flag' node:
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function() {
if (parentNode === this) {
throw new Error(
"You can't sort elements if any one is a descendant of another."
);
}
// Insert before flag:
parentNode.insertBefore(this, nextSibling);
// Remove flag:
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function(i) {
placements[i].call(getSortable.call(this));
});
};
})();
$('#sort').click(function() {
$('.entry').sortElements(function(a, b) {
return $(a).find('.times').text() > $(b).find('.times').text() ? 1 : -1;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<button type="button" id="sort">sort</button>
<div class="entry" id="lala">
<a target="_blank" href="http://lala">lala</a>
<span class="times">4</span>
</div>
<div class="entry" id="lele">
<a target="_blank" href="http://lele.com">lele.com</a>
<span class="times">1</span>
</div>
<div class="entry" id="lolo">
<a target="_blank" href="http://lolo">lolo.com</a>
<span class="times">2</span>
</div>
</div>
答案 2 :(得分:0)
我敢打赌,这比这更简单。我刚刚醒来
$('#sort').click(function(){
var arr = {};
$.each($('.entry'), function(ii, n){
//console.log(n);
arr[$(this).find('.times').html()] = n;
});
$(arr).sort();
$('.entry').remove();
$.each (arr, function(i, v){
$(v).appendTo('#container');
})
})