相关疑难解决方法(0)

我有html看起来像这样:

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

我希望能够按.price或.style排序

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

这个插件接近于我所需要的(因为它可以处理子属性)但它似乎没有像孩子们的内部HTML那样:http://tinysort.sjeiti.com/

任何帮助将由这个菜鸟赞赏.

我有一个使用JQuery获得的元素列表.

var $self = $(this);
var $fields = $('.identifier-controls', $self);

此列表是控件呈现时需要以某种方式操作的元素列表.$ fields列表中的每个元素都包含一个名为"data-order"的数据属性.这个属性告诉我应该在控件中安排元素的顺序(啊要求).顺序并不一定要在直接线性顺序(这意味着第一个控件可以有10个属性值和下一个15和下一个17等,他们只需要出现在递增顺序,有一个简单的实现这一目标的方法？我能提出的所有方法看起来有点过于复杂.

好的，我正在尝试使 jQuery 在单击按钮时对 div 进行排序，

假设列表看起来像这样，

<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>

然后点击按钮后我想让它吐出来，

   <div class="wrapper">
      <div class="item" data-worth="720">Edgy</div>
      <div class="item" data-worth="666">Meme</div>
      <div class="item" data-worth="420">Blaze</div>
    </div>

基本上将价值从低到高排序，重新排列所有东西并将其放回包装纸中。

老实说，我对如何继续这样做一无所知，我想使用 jQuery 的.each功能，但后来我只能在顶部获得最高价值，有什么建议吗？

这是我的片段:

.item {
  display:inline-block;
  width:120px;
  height:120px;
  border:1px solid red;
}

<div id="listing">
  <div data-value="5" class="item">item 5</div>
  <div data-value="3" class="item">item 3</div>
  <div data-value="2" class="item">item 2</div>
  <div data-value="1" class="item">item 1</div>
  <div data-value="4" class="item">item 4</div>
</div>

我想div根据data-value属性的值对s 进行排序,但我想显示使用动画重新排列的项目.我怎样才能做到这一点？

我需要能够根据子元素的data-price属性对div列表进行排序.这是我的标记:

<div class="container">
  <div class="terminal" data-price="195">
      <h3>195</h3>
  </div>
  195 - I should come in 2nd.
</div>

<div class="container">
  <div class="terminal" data-price="220">
      <h3>220</h3>
  </div>
  220 - I should come in 3rd.
</div>

<div class="container">
  <div class="terminal" data-price="130">
      <h3>130</h3>
  </div>
  130 - I should come in 1st.
</div>

这是我到目前为止的脚本:

function sorter(a, b) {
    return a.getAttribute('data-price') - b.getAttribute('data-price');
};
$(document).ready(function () {
        var sortedDivs = $(".terminal").toArray().sort(sorter);
        $.each(sortedDivs, function (index, value) {
            $(".container", this).html(value);
            //console.log(value);
        }); 
});

结果应该替换现有的标记.我无法上班.需要改变什么？

这是一个小提琴.