2列複数要素を動的にソート、高さも揃える

2列横並びで多数の要素をリスト化します。
（左右2列×複数行）

その要素は動的にソートを行うのですが（金額・名前・優先順位）

ソート後、横並び二つの要素の高さを揃えたいです。

ページを読み込み直す事なく。

table・table-cellの使用を考えております。

table-cellを使用すると要素が全て一列横に並んでしまうのですが、
ソート後にtable-rowをもつ要素で2つずつ囲う方法が分からず
困っています。

Flexboxを使用すると下記のような形でソートできるのですが、
table・table-cellを用いても同様なソートは可能でしょうか。

・ソート
・ソート後要素二つ毎に高さを揃える
・要素2つ事に文言が入るのでul liは使用できない

こちらでアドバイスをいただけますと幸いです。
どうぞ、宜しくお願い致します。

IE8まで対応・jqueryは 1.12.4 を使用予定です。

サンプルソースは下記です。

himakuma

2018/01/18 05:13

要素のソート処理は初期表示時のタグに、文字を入れ直している感じですか？

axxxx

2018/01/18 05:17

まだどのように行うかは未定ですが、文字を入れ直すのではなく、要素ごとソートできればと思っております。

sousuke

2018/01/18 05:26

2列横並びというのは.productが２列ということですか？理想形みたいな画像をつけたほうがいいかと。

axxxx

2018/01/18 05:29 編集

そうなります。

sousuke

2018/01/18 06:32

なぜ高さをそろえる必要があるのですか？borderなどの見た目の問題ですか？

行動規範の内容に同意します

回答2件

ベストアンサー

CSS
1.list_outer {
2  display: table;
3}
4
5.list_outer .row {
6  display: table-row;
7}
8
9.list_outer .product {
10  display: table-cell;
11}
12
13.list_outer,
14.list_outer .product {
15  border: 1px solid #333;
16}

とりあえず金額だけ……

JavaScript
1$(function() {
2  // for IE8.
3  var sortTable = function(getValue) {
4    var i, len;
5    var container = $('.list_outer');
6    var templateRow = $('<div class="row"></div>');
7    var fragment = document.createDocumentFragment();
8    var products = container[0].querySelectorAll('.product');
9    var array = [];
10
11    for (i = 0, len = products.length; i < len; i++) {
12      array[i] = { product: products[i], value: getValue(products[i]) };
13    }
14
15    array.sort(function(a, b) { return a.value - b.value; });
16    for (i = 0, len = array.length; i < len; i++) {
17      fragment.appendChild(array[i].product);
18    }
19
20    container.empty();
21    var sorted = fragment.querySelectorAll('.product');
22    for (i = 0, len = sorted.length; i < len; i += 2) {
23      var tr = templateRow.clone(false);
24      tr.append(sorted[i], sorted[i + 1]);
25      container.append(tr);
26    }
27  };
28
29  var sortPrice = function() {
30    sortTable(function(product) {
31      return parseFloat(product.querySelector('.price').innerHTML.replace(/,/g, ''));
32    });
33  };
34
35  sortPrice();
36  $(document).on('click', '#sortPrice', sortPrice);
37});