Jquery - 通过孩子的innerHTML对DIV进行排序 [英] Jquery - sort DIV's by innerHTML of children

问题描述

 < div id =sortThis> 
< div id =1>价格：< span class =price> 20< / span>< span class =style>蓝色< / span>< / div> ; 
< div id =2>价格：< span class =price> 23< / span>< span class =style>红色< / span>< / div> ; 
< div id =3>价格：< span class =price> 10< / span>< span class =style>红色< / span>< / div> ; 
< div id =4>价格：< span class =price> 29< / span>< span class =style> green< / span>< / div> ; 
< div id =5>价格：< span class =price> 35< / span>< span class =style>蓝色< / span>< / div> ; 
< / div> 
  

我希望能够按.price或.style

进行排序

我怀疑这篇文章部分回答了我的问题：在JQuery中排序Divs基于属性'数据排序'？

这个插件接近做我所需要的（因为它可以处理孩子的属性），但它似乎并没有像儿童的innerHTML那样： http://tinysort.sjeiti.com /

任何帮助都会被这个noob所赞赏。

解决方案

直接使用子值和不使用插件的方式进行排序，您可以使用类似于：
$ b

 函数sortUsingNestedText （parent，childSelector，keySelector）{
 var items = parent.children（childSelector）.sort（function（a，b）{
 var vA = $（keySelector，一个）的.text（）; 
 var vB = $（keySelector，b）.text（）; 
 return（vA< vB）？ -1：（vA> vB）？ 1：0; 
}）; 
 parent.append（items）; 
} 
  

然后按价格排序：

  sortUsingNestedText（$（'＃sortThis'），div，span.price）; 
  

这个函数是参数化的，因此可以很容易地与其他div和不同的排序键一起使用。

下面是一个演示： http://jsfiddle.net/tc5dc/ p>

---

使用tinysort插件

另外，如果您可以从中受益 tinysort 插件（提到的问题）提供的功能，您可以动态地增加您的div以适应插件。

查看此演示： http://jsfiddle.net/6guj9/

在示例中，我们首先将价格和样式值添加为数据属性的持有div：

  var sortThis = $（'＃sortThis'）。children（div）; 
 sortThis.each（function（）{
 var p = $（this）; 
 p.attr（data-price，p.find（span.price）。text （））; 
 p.attr（data-style，p.find（span.style）。text（））; 
}）; 
  

然后我们可以自由使用tinysort对相关属性进行排序。按价格排序很简单：

  $（＃sortThis> div）。tsort（{attr：data-price }）; 
  

更改排序顺序和键可以通过传入不同的配置对象来完成。链接的演示显示了一种方法，但您可以想出更好的方案来满足您的需求。

I've got html that looks something like this:

<div id="sortThis">
<div id="1">Price:<span class="price">20</span><span class="style">blue</span></div>
<div id="2">Price:<span class="price">23</span><span class="style">red</span></div>
<div id="3">Price:<span class="price">10</span><span class="style">red</span></div>
<div id="4">Price:<span class="price">29</span><span class="style">green</span></div>
<div id="5">Price:<span class="price">35</span><span class="style">blue</span></div>
</div>

And I want to be able to sort by .price or by .style

I suspect that this post partially answers my question: Sort Divs in Jquery Based on Attribute 'data-sort'?

And this plugin comes close to doing what I need (since it can handle child attributes) but it does not seem to go as far as children's innerHTML: http://tinysort.sjeiti.com/

Any help will be appreciated by this noob.

解决方案

To do this sort directly using the child values and without a plugin, you could use something like:

function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

Sorting by price can then be done as such:

sortUsingNestedText($('#sortThis'), "div", "span.price");

The function is parametrised so that it can be easily reused with other divs and different sort keys.

Here's a demo: http://jsfiddle.net/tc5dc/

---

Using the tinysort plugin

Alternatively, if you can benefit from the features provided by the tinysort plugin (mentioned in question), you could dynamically augment your divs to suit the plugin.

Check out this demo: http://jsfiddle.net/6guj9/

In the example, we first add the price and style values as data attributes of the holding div:

var sortThis = $('#sortThis').children("div");
sortThis.each(function() {
    var p = $(this);
    p.attr("data-price", p.find("span.price").text());
    p.attr("data-style", p.find("span.style").text());
});

We're then free to use tinysort to sort on the relevant attributes. Sorting by price would be simply:

$("#sortThis>div").tsort({attr:"data-price"});

Changing the sort order and keys can be done by simply passing in different config objects. The linked demo shows one way to do this, but you can probably come up with a better scheme to suit your needs.

这篇关于Jquery - 通过孩子的innerHTML对DIV进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！