使用数据属性使用jQuery对元素进行排序 [英] Sorting elements with jQuery using data attributes
问题描述
只是为了让你知道，我是一个新秀。
我尝试为我网站上的菜单导航编程某个功能。 （ http://thomasmedicus.at/ ）
I希望我网站上的访问者能够按日期或相关性对我的项目进行排序。
我创建了这张图片，以便您更好地了解我：预览
在第一张图片中项目按相关性进行分拣。因此，约会被打破了。当您现在点击标记的日期时，项目（2,1,3）的顺序会发生变化。同样发生的是相关性是严格的低谷，约会不再是。当然，当你再次点击RELvence时，这也应该反过来了。我希望你能得到这个想法！？
我设法创建了这个编程错误的脚本，但是这里没有编程的是引人注目的：
< html>< head>< style type =text / css><！ - body {text-align：left;}＃fullDescrip {宽度：450px;身高：200px; border：solid＃000000 2px;保证金：0自动; text-align：justify; padding：20px;}＃prodContainer .products {margin：10px;边界：固体#AAAAAA 1px;宽度：100px;身高：100px;}＃prodContainer2 .products {margin：10px;边界：固体#AAAAAA 1px;宽度：100px;高度：100px;} - >< / style>< script> var rand = Math.floor（Math.random（）* 2）; //此处的数字必须是您列出的产品总数var prod = new Array（）; prod [0] =< width ='100'height ='100'>在这里改变了！; prod [1] =< width ='100'height ='100'>再次改变！; function loadProd（content）{document.getElementById（'fullDescrip'）。innerHTML = content; }< / script>< / head>< body>< div id =fullDescrip>< script> document.getElementById（'fullDescrip'）。innerHTML = prod [rand];< / script> < / DIV> < table id =prodContainer> < TR> < TD> < div id =prod1class =productsonClick =loadProd（prod [0]）>按钮1< / div> < / TD> < TD> < table id =prodContainer2> < TR> < TD> < div id =prod2class =productsonClick =loadProd（prod [1]）>按钮2< / div> < / TD> < / body>< / html>
它会是如果你能在这里帮助我真棒因为我不是程序员，所以我不能自己做...
谢谢，汤姆
我认为你应该保留vanilla JavaScript以供日后使用，并使用jQuery库让你的生活更轻松。您的网站已经在使用它，因此您无需进行任何调整。
以下是使用jQuery进行排序的一个很好的示例
使用数据ID排序元素
您所需要的只是提供一些排序标准，上面的示例依赖于data-attribute，这对于这种功能非常方便。
/ ** *此函数返回基于数据属性的排序的回调。 * * @param sortCriteria *用于排序的数据属性的名称。 * @param itemsToSort *用于排序的项目的字符串选择器。 * @param container *放置物品的容器。 * @returns {Function} * / var sortByDataAttr = function（sortCriteria，itemsToSort，container）{return function（）{//抓取所有项目进行排序。 var $ collection = $（itemsToSort）; //对它们进行排序并附加到容器中。 $ collection.sort（function（a，b）{return $（a）.data（sortCriteria） - $（b）.data（sortCriteria）}）。appendTo（$（container））; }; }，/ ** *从所有元素中删除类并应用于当前。 * * @param current *要应用类的HTML节点。 * @param activeClass *活动状态字符串类。 * / highlightActive = function（current，activeClass）{$（'。'+ activeClass）.removeClass（activeClass）; $（电流）.addClass（activeClass）; }; //在start.highlightActive（'。btn-sort-weight'，'btn-sort - active'）中排序'data-weight'; sortByDataAttr（'weight'，'.item'，'。list '）; $（'。btn-sort-weight'）。on（'click'，function（）{highlightActive（this，'btn-sort - active'）; sortByDataAttr（'weight'，'。item'， '.list'）（）;}）; $（'。btn-sort-index'）。on（'click'，function（）{highlightActive（this，'btn-sort - active'）; sortByDataAttr（' index'，'。item'，'。list'）（）;}）;
.btn {text-decoration：line-through ;;}。btn-sort - active {text-decoration：none;} < pre class =snippet-code-html lang-html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery .min.js>< / script>< button class =btn btn-sort-weight>按重量排序< / button>< button class =btn btn-sort-index>排序通过索引< / button>< ul class =list> < li class =itemdata-index =133data-weight =5> First-weight：5-index：133< / li> < li class =itemdata-index =2data-weight =1> Second - weight：1 - index：2< / li> < li class =itemdata-index =87data-weight =16> Third - weight：16 - index：87< / li>< / ul>
Just to let you know, I'm a rookie. I try to programm a certain function for the menu-navigation on my website. (http://thomasmedicus.at/)
I want visitors on my website to be able to sort my projects either by "date" or by "relevance". I created this image so you can understand me better: preview
in the first image the projects are sortet by relevance. therefor "date" is striked trough. when you now click on the stricked trough "date" the order of the projects (2, 1, 3) changes. what also happens is that "relevance" is strickt trough and "date" not anymore. of course this should also work the other way round when you then click on "relevence" again. i hope you get the idea!?
i managed to create this badly programmed script, but what isnt programmed here is the striking through:
<html>
<head>
<style type="text/css">
<!--
body {
text-align: left;
}
#fullDescrip {
width: 450px;
height: 200px;
border: solid #000000 2px;
margin: 0 auto;
text-align: justify;
padding: 20px;
}
#prodContainer .products {
margin: 10px;
border: solid #AAAAAA 1px;
width: 100px;
height: 100px;
}
#prodContainer2 .products {
margin: 10px;
border: solid #AAAAAA 1px;
width: 100px;
height: 100px;
}
-->
</style>
<script>
var rand = Math.floor(Math.random() * 2);//the number here must be the total number of products you have listed
var prod = new Array();
prod[0] = "<width='100' height='100'>changed here!";
prod[1] = "<width='100' height='100'>changed again!";
function loadProd(content){
document.getElementById('fullDescrip').innerHTML = content;
}
</script>
</head>
<body>
<div id="fullDescrip">
<script>
document.getElementById('fullDescrip').innerHTML = prod[rand];
</script>
</div>
<table id="prodContainer">
<tr>
<td>
<div id="prod1" class="products" onClick="loadProd(prod[0])">
button 1
</div>
</td>
<td>
<table id="prodContainer2">
<tr>
<td>
<div id="prod2" class="products" onClick="loadProd(prod[1])">
button 2
</div>
</td>
</body>
</html>
it would be awesome if you can help me here. since i am no programmer i'm not able to do it on my own...
thanks, tom
I think you should leave vanilla JavaScript for later and use jQuery library to make your life much easier. Your website is already using it, so you don't have to adjust anything.
Here is a good example of sorting with jQuery jQuery sort elements using data id
All you need is to provide some criteria for sorting, the example above relies on data-attribute, which is really handy for this kind of functionality.
/**
* This function returns a callback for data-attribute based sorting.
*
* @param sortCriteria
* Name of the data-attribute for sorting.
* @param itemsToSort
* A string selector for items for sorting.
* @param container
* A container to put items.
* @returns {Function}
*/
var sortByDataAttr = function(sortCriteria, itemsToSort, container) {
return function() {
// Grab all the items for sorting.
var $collection = $(itemsToSort);
// Sort them and append in to container.
$collection.sort(function(a, b) {
return $(a).data(sortCriteria) - $(b).data(sortCriteria)
}).appendTo($(container));
};
},
/**
* Remove class from all elements and apply to current.
*
* @param current
* HTML node to apply class.
* @param activeClass
* Active-state string class.
*/
highlightActive = function(current, activeClass) {
$('.' + activeClass).removeClass(activeClass);
$(current).addClass(activeClass);
};
// Sort by 'data-weight' at the start.
highlightActive('.btn-sort-weight', 'btn-sort--active');
sortByDataAttr('weight', '.item', '.list');
$('.btn-sort-weight').on('click', function() {
highlightActive(this, 'btn-sort--active');
sortByDataAttr('weight', '.item', '.list')();
});
$('.btn-sort-index').on('click', function() {
highlightActive(this, 'btn-sort--active');
sortByDataAttr('index', '.item', '.list')();
});
.btn {
text-decoration: line-through;;
}
.btn-sort--active {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-sort-weight">Sort by weight</button>
<button class="btn btn-sort-index">Sort by index</button>
<ul class="list">
<li class="item" data-index="133" data-weight="5">First - weight: 5 - index: 133</li>
<li class="item" data-index="2" data-weight="1">Second - weight: 1 - index: 2</li>
<li class="item" data-index="87" data-weight="16">Third - weight: 16 - index: 87</li>
</ul>
这篇关于使用数据属性使用jQuery对元素进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![预览](\"http://thomasmedicus.at/wp-content/uploads/2015/07/preview.gif\"){kind=link}
