1

既に表示されている要素を昇順に並べ替えて、再配置する必要があります。data-val 属性の値で並べ替える必要があります。

<div id="a" class="item" data-val="6">Item a</div>
<div id="b" class="item" data-val="8">Item b</div>
<div id="c" class="item" data-val="2">Item c</div>
<div id="d" class="item" data-val="5">Item d</div>

<br />
<button onclick="sortOut()">Sort Out</button>

私はここで例を作りました: http://jsfiddle.net/quatzael/uKnpa/

その方法がわかりません。私はちょっと始めましたが、おそらく間違っています。

最初に「アイテム」と呼ばれるクラスを持つ要素を見つけ、次にこのクラスを持つ要素を data-val 属性の値で並べ替える関数が必要です。

すべてのブラウザで動作する必要があるため、ソリューションにはおそらく .appendChild() が含まれる必要があります

どんな助けのためのTnx..

4

2 に答える 2

3

新しくソートされた順序でそれらを DOM に追加する必要があります。

これを行うためにコードに追加したものは次のとおりです。

divs.sort(function(a, b) {
    return a.dataset.val.localeCompare(b.dataset.val);
});

var br = document.getElementsByTagName("br")[0];

divs.forEach(function(el) {
    document.body.insertBefore(el, br);
});

http://jsfiddle.net/RZ2K4/

このメソッドは、並べ替えられたアイテムが他に何もないコンテナーにある場合のappendChild()代わりに使用できます。.insertBefore()

古いブラウザーをサポートするには、.getAttribute("data-val")代わりに.dataset.val.

また、数値の並べ替えが必要な場合.localeCompareは、.sort()関数で使用しないでください。

于 2013-01-02T23:48:05.960 に答える
0

flexラッパーのプロパティを追加して、orderそれらを注文するために使用できます。または、要素を親に再追加できます

デモ

const items = Array.from(document.querySelectorAll("li"));
const btn = document.querySelector("button");
const orderBy = Array(5).fill().map((x, i) => i + 1); // [1..5]

btn.addEventListener("click", clickHander);
function clickHander() {
  orderBy.forEach(i => {
    const item = items.find(x => x.getAttribute("data-order") === `${i}`);
    item.style.order = i;
    // OR: item.parentElement.appendChild(item);
  });
}
ul {
  display: flex;
  flex-direction: column;
}
<ul>
  <li data-order="4">order 4</li>
  <li data-order="3">order 3</li>
  <li data-order="1">order 1</li>
  <li data-order="5">order 5</li>
  <li data-order="2">order 2</li>
</ul>
<button>sort</button>

于 2020-09-08T16:28:47.533 に答える