Question

是否可以使用jQuery按ID或类订购一组Div？这是我的代码：

<div id="product_categories">
  <div class="wpsc_categorisation_group" id="categorisation_group_49">
        <a href="http://africa.local/store/african-dolls/">African Dolls</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_47">
        <a href="http://africa.local/store/anklets/">Anklets</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_5">
        <a href="http://africa.local/store/bracelets/">Bracelets</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_11">
        <a href="http://africa.local/store/childrens-jewelry/">Children's Jewelry</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_13">
        <a href="http://africa.local/store/clearance/">Clearance</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_8">
        <a href="http://africa.local/store/cross-necklaces/">Cross Necklaces</a>
  </div>
</div>

我知道代码很乱，但WP电子商务正在生成它，不允许我按照我想要的方式订购它。有什么想法吗？

感谢。

Answer 1

虽然还有其他一些已经上线，但我也会把它扔掉！这个使用正则表达式去除数字。

var container = $("#product_categories");
var ele = container.children("div.wpsc_categorisation_group");

ele.detach().sort(function (a, b) {
    var a = $(a).attr('id').match(/\d+/);
    var b = $(b).attr('id').match(/\d+/);
    return a-b;
});
container.append(ele);

希望它有所帮助！

Answer 2

我提出了草稿。这段代码很可能会被清理很多，但是你去了

演示：http://jsfiddle.net/3paUL/

$('#sort').click(function() {
    var ids = [];
    var divs = {};
    $('#product_categories div.wpsc_categorisation_group').each(function() {
        var numPart = parseInt($(this).attr('id').substr($(this).attr('id').lastIndexOf('_') + 1));
        ids.push(numPart);
        divs[numPart] = $(this);

    });
    ids.sort(sortNumber);
    $('#product_categories').html('');

    for (id in ids) {
        $('#product_categories').append(divs[ids[id]]);
    }
});

function sortNumber(a, b) {
    return a - b;
}

工作原理：查看内部DIV元素的ID并对其进行排序。由于所有DIV元素都遵循_和数字的模式，因此我取消该数字并将其用作索引。

Answer 3

我会使用.sort，所以像这样：

var ids = $(".wpsc_categorisation_group").map(function(){
    return parseInt(this.id.replace('categorisation_group_',''));
}).toArray().sort();

$.each(ids, function(){
    $('#categorisation_group_'+this).prependTo("#product_categories");
});

检查我的test case on jsFiddle;

Answer 4

您可以使用sortElements插件：http://james.padolsey.com/javascript/sorting-elements-with-jquery/

$('.wpsc_categorisation_group').sortElements(function(a, b){
    return parseInt(a.id.replace('categorisation_group_', ''), 10) > parseInt(b.id.replace('categorisation_group_', ''), 10) ? 1 : -1;
});

here你可以找到jsFiddle测试用例

Answer 5

你走了！

function orderDivs()
{
    var divs = [];
    $("#product_categories .wpsc_categorisation_group").each(function() {
        divs.push($(this));
    });
    // sort using a custom compare function
    divs.sort(byID);
    // empty the old contents
    $("#product_categories").empty();
    // put the ordered divs back in the same container
    for (var i=0; i < divs.length; i++) {
        $("#product_categories").append(divs[i]);
    }
}
function byID(a, b)
{
    // extract number from id
    var a_id_num = parseInt($(a).attr("id").split("_")[2], 10);
    var b_id_num = parseInt($(b).attr("id").split("_")[2], 10);
    // compare with the other
    if(a_id_num > b_id_num) {
        return 1;
    } else {
        return 0;
    }
}

$(function() {
    // ready, go!
    orderDivs();
});

JSFiddle上的工作示例：http://jsfiddle.net/PnDLw/

使用jQuery按ID或类顺序排序无序的Div组

5 个答案: