Блог

Возможно ли упорядочить группу Div по идентификатору или классу с помощью jQuery? Вот мой код:

 <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 E-Commerce генерирует его и не позволяет мне упорядочивать его так, как я хочу. Есть мысли?

Спасибо.

Хотя уже есть несколько других, я добавлю и это! Здесь используются регулярные выражения для удаления числа.

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

Надеюсь, это поможет!

Я придумал черновик. Этот код, скорее всего, можно сильно почистить, но вот что вы делаете

Демонстрация: 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 внутри и сортирует их. Поскольку все ваши элементы DIV следуют шаблону из _ и числа, я удаляю это число и использую его в качестве индекса.

Я бы использовал .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");
});
  

Проверьте мой тестовый пример на jsFiddle;

Вы можете использовать плагин 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;
});
  

здесь вы можете найти тестовый пример jsFiddle

Поехали!

 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 /