Можно ли добавить индекс к столбцу? Заказать их

Question

Можно ли добавить индекс к столбцу? Заказать их

0

Можно ли добавить индекс или что-то в столбец, поэтому, если столбец имеет более высокий индекс, он будет ниже индексов с более низким индексом?

Например, http://jsfiddle.net/BL3M7/8/:

HTML:

<div class="block-container">
    <div class="block" style="height: 50px">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
</div>

JS:

$(function() {
    setTimeout(function() {
        $('.block-container').append('<div class="block">7</div>');
        $('.block-container').append('<div class="block">8</div>');
        $('.block-container').append('<div class="block">9</div>');
        $('.block-container').append('<div class="block">10</div>');
        $('.block-container').append('<div class="block">11</div>');
    }, 2000);
})

CSS:

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
    margin: 0;
}

.block-container {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%; 
}

.block {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
    height: 100px;
    border: 1px solid black;
}

Я хочу, чтобы коробки 7,8,9,10 были ниже ящиков 4,6,5.

good_evening 19 дек. 2013, в 05:35

Источник

0

Вам нужно использовать Javascript, чтобы изменить порядок элементов DOM.
Barmar 19 дек. 2013, в 04:00
1

В качестве альтернативы, вы можете использовать дизайн в стиле MVC, в котором ваше представление представляет только данные, хранящиеся в модели данных, и, таким образом, будет не только поддающимся заказу, но и переупорядочиваемым.
brandonscript 19 дек. 2013, в 04:01
0

Как насчет добавления их в другой отдельный «.block-контейнер»?
davidpauljunior 19 дек. 2013, в 04:04
0

почему бы не использовать JQuery TableSorter? См. Tablesorter.com/docs
Scary Wombat 19 дек. 2013, в 04:06
0

@ r3mus: извини, но я абсолютно не слежу за тобой.
good_evening 19 дек. 2013, в 04:10
0

@ user2310289: Я думаю, это яблоки и апельсины.
good_evening 19 дек. 2013, в 04:11
0

@ хорошо, даже если вы упомянули add an index a column поэтому я принял таблицу. Тип Apple, я думаю
Scary Wombat 19 дек. 2013, в 04:15

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

Вам нужно использовать Javascript, чтобы изменить порядок элементов DOM.
В качестве альтернативы, вы можете использовать дизайн в стиле MVC, в котором ваше представление представляет только данные, хранящиеся в модели данных, и, таким образом, будет не только поддающимся заказу, но и переупорядочиваемым.
Как насчет добавления их в другой отдельный «.block-контейнер»?
почему бы не использовать JQuery TableSorter? См. Tablesorter.com/docs
@ r3mus: извини, но я абсолютно не слежу за тобой.
@ user2310289: Я думаю, это яблоки и апельсины.
@ хорошо, даже если вы упомянули add an index a column поэтому я принял таблицу. Тип Apple, я думаю

Deryck · Answer 1 · 2013-12-19T01-24-00.000Z

Я так понимаю, вы имеете в виду нечто похожее на это:

Демо-версия JS Fiddle

Весь код не изменяется, кроме этого.

CSS:

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0;
}
.block-container {
    width: 100%;
    overflow: hidden;
}
.block {
    display: block;
    margin-bottom: 20px;
    margin-left: 1%;
    margin-right: 1%;
    width: 30%;
    height: 100px;
    border: 1px solid black;
    float: left;
}

Javascript:

$(function () {
    setTimeout(function () {
        $('.block-container').append('<div class="block">7</div>');
        $('.block-container').append('<div class="block">8</div>');
        $('.block-container').append('<div class="block">9</div>');
        $('.block-container').append('<div class="block">10</div>');
        $('.block-container').append('<div class="block">11</div>');
    }, 2000);
});

HTML:

<div class="block-container">
    <div class="block" style="height: 50px">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
</div>

Это только то, что я интерпретирую ваш вопрос для достижения результата. Если я ошибаюсь, я извиняюсь. Я понимаю, что вы используете столбцы, но если этот вид вам нужен, то столбцы не нужны.

Это не работает. если вы добавляете $(function () { setTimeout(function () { $('.block-container').append('<div class="block">7</div>'); $('.block-container').append('<div class="block">8</div>'); $('.block-container').append('<div class="block">2</div>'); $('.block-container').append('<div class="block">10</div>'); $('.block-container').append('<div class="block">11</div>'); }, 2000); });
Используя Chrome и Firefox, оба доказывают это успешно. Пожалуйста, уточните @ user2310289 - я только что обновил весь использованный код, и все показывается, как и ожидалось (3 столбца с 4 5 6 выше 7 8 9 10)
Может быть, я неправильно читаю вопрос (снова), но если изначально не было block 2 и вы добавили block 2 он должен быть вставлен между блоком 1 и 3
LOL уже есть блок 2 в исходном наборе (он идет 1 2 3 4 5 6) Я думаю, вы почему-то поменяли блок 9 с 2. новый набор идет 7 8 9 10 11
в вашем html удалить block 2 в вашем JS изменить block 9 на block 2 - новый block 2 он должен вставить между блоком 1 и 3 - нет?
отрицательный. Это просто текстовое значение, а не индекс. Чтобы разместить его там, вам нужно будет удалить набор из DOM и воссоздать его (он является block-container ), а затем снова вставить его в DOM, где он был ранее расположен. К сожалению, это означает, что вам также необходимо знать, какой блок был удален и где он был. Так что в этом случае вы должны отсортировать блоки по $('.block').text() перед повторной вставкой в DOM, предоставив им правильные назначения индекса.