Разбивка выведенных элементов на блоки

186

10 января 2018, 19:58

Всем привет. Помогите пожалуйста разобраться с сортировкой элементов по категориям. На данный момент я вывел все элементы - класс block. Но мне нужно чтобы каждый block сортировался по категории, и был обернут в контейнер. Сейчас у меня на выходе:

<div class='blocks' id='prices_body'>
    <div class='cagories-container'>
        <div class='block'>Apple</div>
        <div class='block'>Nut</div>
        <div class='block'>Apple</div>
    </div>
</div>

А мне необходимо получить вот так:

<div class='blocks' id='prices_body'>
    <div class='cagories-container'>
        <div class='block'>Apple</div>
        <div class='block'>Apple</div>
    </div>
   <div class='categories-container'>
      <div class='block'>Nut</div>
   </div>
</div>

Сам оригинальный код вывода категорий:

            var block = '';
            var categories = [];

            for (var cat_temp in categories) {
                for (var sub_temp in sub_cat) {
                    var sub_cat_prod = sub_cat[sub_temp]['products'];
                    for (var prod in sub_cat_prod) {
                        var price = 0;
                        if (sub_cat_prod[prod].price != null) {
                            if (sub_cat_prod[prod].price[sub_cat_prod[prod].price.length - 1] == 0) {
                                price = sub_cat_prod[prod].price.slice(0, -1);
                            } else {
                                price = sub_cat_prod[prod].price;
                            }
                            if (sub_cat_prod[prod].price[sub_cat_prod[prod].price.length - 2] == 0) {
                                if (sub_cat_prod[prod].price[sub_cat_prod[prod].price.length - 3] == '.') {
                                    price = sub_cat_prod[prod].price.slice(0, -3);
                                } else {
                                    price = sub_cat_prod[prod].price.slice(0, -2);
                                }
                            }
                            price += ' RUB';
                        } else {
                            price = '';
                        }
                        block += '<div class="block">
                                    Some content
                                    </div>';
                    }
                }
            }
            $('#prices_body').append('<div class="categories-content">' +  block + '</div>');

Answer 1

Если данные в более удобном виде получить не получается, нужно пересобрать контент на клиенте.

        var block = '';
        var categories = [];
        var content = [];
        for (var cat_temp in categories) {
            for (var sub_temp in sub_cat) {
                var sub_cat_prod = sub_cat[sub_temp]['products'];
                for (var prod in sub_cat_prod) {
                    var price = 0;
                    if (sub_cat_prod[prod].price != null) {
                        if (sub_cat_prod[prod].price[sub_cat_prod[prod].price.length - 1] == 0) {
                            price = sub_cat_prod[prod].price.slice(0, -1);
                        } else {
                            price = sub_cat_prod[prod].price;
                        }
                        if (sub_cat_prod[prod].price[sub_cat_prod[prod].price.length - 2] == 0) {
                            if (sub_cat_prod[prod].price[sub_cat_prod[prod].price.length - 3] == '.') {
                                price = sub_cat_prod[prod].price.slice(0, -3);
                            } else {
                                price = sub_cat_prod[prod].price.slice(0, -2);
                            }
                        }
                        price += ' RUB';
                    } else {
                        price = '';
                    }
                    content.push({category: 'Apple', content: 
                                               '<div class="block">Some 
                                                content</div>'});
                    //block += '<div class="block">
                    //            Some content
                    //            </div>';
                }
            }
        }
       content.sort(function(a, b) {
          return a.category[1] - b.category[1];
       });
       $('#prices_body').append('<div class="categories-content">' +  content + '</div>');

Возможно что-то упустил, но по сути как-то так нужно сделать.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Slick slider нужна помощь?

Ребят, есть вот такой вертикальный слайдер сделанный на Slick

225

javascript

Почему count равно 5?

Почему count равно 5? Когда card === 2, 3, 4, 5, 6 к count надо прибавить +1 Когда card === 7, 8 , 9 к count = 0 Когда card === 10, 'J', 'Q', 'K', 'A' - count - 1

218

javascript

Почему 0 <= 0 возвращает false?

Почему card <= 0 возвращает false? var count = 0;

193

javascript

Можно ли задать имя свойства объекта переменной ?(js)

Допустим у меня есть переменные field, value и объект form :

179