Question

我需要在我使用的CMS不提供此功能的页面上对某些项目进行排序。我可以动态添加一些标签，但我需要一些Javascript来帮助这些项目按正确顺序排列。

此外，在HTML页面的顶部，我有一个＆＃39;事件选择器＆＃39;，例如：

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

逻辑是：使用＆＃39; sort-event＆＃39;排序 w-dyn-item 元素。对应于＆＃39;事件选择器的数字＆＃39; （从最小到最大数字）。

该网站使用jQuery，如果有任何帮助。

我在这里把它变成了一个小提琴：https://jsfiddle.net/j2rqze8p

非常感谢您的帮助。

Answer 1

以下是使用jQuery实际排序元素的方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

另一件事是您可能需要在事件选择器＆＃39;上运行此脚本。如果要通过动态进行排序，请更改。但这基本上只是一个不同的讨论问题。

用于对元素

1 个答案: