並べ替えの方法配列インデックスで並べ替えられたリスト

Question

私はデータ属性でリストを並べ替えようとしています。下記のコードを参考にしてください。

<ul> 
<li data-block="block1">Some Text...</li> 
<li data-block="block2">Some Text...</li> 
<li data-block="block3">Some Text...</li> 
<li data-block="block4">Some Text...</li> 
</ul> 

私のjQueryのアレイでは、私は値

values = array("block2","block1","block4","block3"); 

を以下しているので、私は以下のような配列インデックスの方法でリストを並べ替える/ソートする必要があります。

<ul> 
<li data-block="block2">Some Text...</li> 
<li data-block="block1">Some Text...</li> 
<li data-block="block4">Some Text...</li> 
<li data-block="block3">Some Text...</li> 
</ul> 

適切な解決方法を手伝ってください。

Answer 1

あなたは

var values = ["block2", "block1", "block4", "block3"]; 
 

 
// get all li with data attribute 
 
var $li = $('li[data-block]'); 
 
// sort them based on the index 
 
$li.sort(function(a, b) { 
 
    return values.indexOf($(a).data('block')) - values.indexOf($(b).data('block')); 
 
}) 
 
// update the order by appending back to it's parent 
 
.appendTo($li.parent());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li data-block="block1">Some Text...1</li> 
 
    <li data-block="block2">Some Text...2</li> 
 
    <li data-block="block3">Some Text...3</li> 
 
    <li data-block="block4">Some Text...4</li> 
 
</ul>

---

ES6矢印方法

var values = ["block2", "block1", "block4", "block3"]; 
 

 
var $li = $('li[data-block]'); 
 
$li.sort((a, b) => values.indexOf($(a).data('block')) - values.indexOf($(b).data('block'))) 
 
    .appendTo($li.parent());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li data-block="block1">Some Text...1</li> 
 
    <li data-block="block2">Some Text...2</li> 
 
    <li data-block="block3">Some Text...3</li> 
 
    <li data-block="block4">Some Text...4</li> 
 
</ul>

012の要素をソートするため sort()を使用することができます

Answer 2

あなたはそれが私の問題を解決し、私の応答遅れて申し訳ありません.html()、.map()、Attribute Equals Selector [name="value"]

var values = Array("block2","block1","block4","block3"); 
 
$("ul").html(values.map(function(val) {return $("[data-block="+val+"]")}))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<ul> 
 
    <li data-block="block1">Some Text...1</li> 
 
    <li data-block="block2">Some Text...2</li> 
 
    <li data-block="block3">Some Text...3</li> 
 
    <li data-block="block4">Some Text...4</li> 
 
</ul>