sorting - 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-item 元素进行排序。

如果有帮助的话，该网站正在使用 jQuery。

我已将其放入此处的 fiddle 中:https://jsfiddle.net/j2rqze8p

非常感谢您的帮助。

Answer 1

以下是如何使用 jQuery 对元素进行实际排序。

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

if(!sortAttributeValue) {
	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) {
	var item1Value = $(item1).find(attrSelector).attr('sort');
	var item2Value = $(item2).find(attrSelector).attr('sort');

	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">
	<div class="w-embed">
		<div event-selector="weddings"></div>
	</div>


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

有两个时刻。首先，我注意到事件选择器的值是复数，而排序事件是单数。我通过使用哈希值来匹配另一个来解决这个问题。

另一件事是，如果您希望动态排序，您可能需要在“事件选择器”更改时运行此脚本。但这基本上是一个不同的讨论问题。