요소를 정렬하는 자바 스크립트

Question

내가 사용하는 CMS가 제공하지 않는 페이지의 항목을 정렬해야합니다. 일부 태그를 동적으로 추가 할 수 있지만 항목을 올바른 순서로 배치하는 자바 스크립트를 사용하면 도움이 필요합니다.

또한 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>

두 순간입니다. 우선, event-selector의 값은 복수형 인 반면 sort-event는 단수형 인 것으로 나타났습니다. 해시를 사용하여이 문제를 해결했습니다.

동적 인 정렬을 원하면 '이벤트 선택기'변경시이 스크립트를 실행해야 할 수도 있습니다. 그러나 기본적으로 다른 토론의 문제입니다.