要素をソートするJavascript

Question

私が使用しているCMSが提供していないページの項目をソートする必要があります。いくつかのタグを動的に追加することができますが、正しい順序で項目を配置するJavascriptでここで助けが必要です。私は「イベントセレクタ」を持っているHTMLページの上部にさらに

、例えば：

<div class="w-embed"> 
    <div event-selector="weddings"></div> 
</div> 

これは、使用するソート番号のセットを決定するであろう。各項目には、各セットのソート番号を持つコードが含まれています。 w-dyn-itemはソートを必要とする要素です。

<div class="w-dyn-list"> 
    <div class="w-dyn-items"> 

    <div class="w-dyn-item"> 
     <div class="w-embed"> 
     <div sort-event="conference" sort="09"></div> 
     <div sort-event="exhibition" sort="110"></div> 
     <div sort-event="wedding" sort="2"></div> 
     </div> 
     <div> 
     Content A 
     </div> 
    </div> 

    <div class="w-dyn-item"> 
     <div class="w-embed"> 
     <div sort-event="conference" sort="06"></div> 
     <div sort-event="exhibition" sort="60"></div> 
     <div sort-event="wedding" sort="1"></div> 
     </div> 
     <div> 
     Content B 
     </div> 
    </div> 

    <div class="w-dyn-item"> 
     <div class="w-embed"> 
     <div sort-event="conference" sort="01"></div> 
     <div sort-event="exhibition" sort="54"></div> 
     <div sort-event="wedding" sort="3"></div> 
     </div> 
     <div> 
     Content C 
     </div> 
    </div> 

    </div> 
</div> 

ロジックは次のようになります。ソートW-DYN項目（最大数に最小から）「イベントセレクタ」に対応する「ソート・イベント」の数字を用いて要素。

サイトがjQueryを使用している場合は、それが助けになります。

私はここでフィドルにそれを入れている：任意の助けhttps://jsfiddle.net/j2rqze8p

感謝を。

Answer 1

実際にjQueryで要素を並べ替える方法は次のとおりです。

var sortPropertyName = $('.w-embed [event-selector]').attr('event-selector'); 
 
var sortAttrValues = { 
 
\t 'weddings': 'wedding', 
 
\t 'exhibitions': 'exhibition', 
 
\t 'conferences': 'conference' 
 
}; 
 
var sortAttributeValue = sortAttrValues[sortPropertyName]; 
 

 
if(!sortAttributeValue) { 
 
\t throw new Error('Unable to sort. Sort attribute value not found.') 
 
} 
 

 
var attrSelector = '[sort-event="' + sortAttributeValue + '"]'; 
 

 
var $container = $('.w-dyn-items'); 
 
var $items = $container.children('.w-dyn-item'); 
 

 
$items.sort(function (item1, item2) { 
 
\t var item1Value = $(item1).find(attrSelector).attr('sort'); 
 
\t var item2Value = $(item2).find(attrSelector).attr('sort'); 
 

 
\t return parseInt(item1Value) - parseInt(item2Value); 
 

 
}); 
 

 
$items.detach().appendTo($container);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="w-dyn-list"> 
 
\t <div class="w-embed"> 
 
\t \t <div event-selector="weddings"></div> 
 
\t </div> 
 

 

 
\t <div class="w-dyn-items"> 
 

 
\t \t <div class="w-dyn-item"> 
 
\t \t \t <div class="w-embed"> 
 
\t \t \t \t <div sort-event="conference" sort="09"></div> 
 
\t \t \t \t <div sort-event="exhibition" sort="110"></div> 
 
\t \t \t \t <div sort-event="wedding" sort="2"></div> 
 
\t \t \t </div> 
 
\t \t \t <div> 
 
\t \t \t \t Content A 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="w-dyn-item"> 
 
\t \t \t <div class="w-embed"> 
 
\t \t \t \t <div sort-event="conference" sort="06"></div> 
 
\t \t \t \t <div sort-event="exhibition" sort="60"></div> 
 
\t \t \t \t <div sort-event="wedding" sort="1"></div> 
 
\t \t \t </div> 
 
\t \t \t <div> 
 
\t \t \t \t Content B 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="w-dyn-item"> 
 
\t \t \t <div class="w-embed"> 
 
\t \t \t \t <div sort-event="conference" sort="01"></div> 
 
\t \t \t \t <div sort-event="exhibition" sort="54"></div> 
 
\t \t \t \t <div sort-event="wedding" sort="3"></div> 
 
\t \t \t </div> 
 
\t \t \t <div> 
 
\t \t \t \t Content C 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t </div> 
 
</div>

2つの瞬間があります。 最初に、私が気付いたように、event-selectorの値は複数形ですが、sort-eventは単数形です。 ハッシュを使ってこれを解決しました。

別のことは、ソートを動的にする場合は、 'event-selector'の変更でこのスクリプトを実行する必要があることです。しかし基本的には別の議論の問題です。