Question

我将<div>嵌套在主<div>内。

主<div>具有class="data"属性，嵌套<div>具有class="smallData"属性。

在 .smallData <div>内部，有一个<span>由jQuery更新。此值为评级。

我现在想要在评级增加/减少之后订购<div> s，以便它们始终按升序排列。我尝试的一切似乎都没有工作。这是我的代码：

<div class="data" id="entries">
{% for entry in entries %}
<div class="smallData" >
    <div id="entryHead">
        <h3>{{ entry.name }} </h3>
    </div>
    <div id="entryBody">
        <p><b>Rating: <span id="spanText" class="rate_{{ entry.key.id()}}">{{ entry.rating }}</span></b><br><b>likes: <span class="like_{{ entry.key.id()}}">{{ entry.likes }}</span> dislikes: <span class="dislike_{{ entry.key.id()}}">{{ entry.dislikes }}</span></b></p>
        <p><a href="javascript:likes('{{entry.key.id()}}');" >Like</a>  | <a href="javascript:dislikes('{{entry.key.id()}}');" >Dislike</a></p>
    </div>
</div>
{% endfor %}

这会为我的数据库中的每个实体生成<div>个。更新评级的代码如下所示：

function dislikes(entryKey){
        // Update the datastore by passing a json object to python script. Return field dislikes when complete
        var name = "dislike_" + entryKey;
        var rate = "rate_" + entryKey;
        $.ajax({
            type: "POST",
            url: "/dislike/",
            dataType: 'json',
            data: JSON.stringify({ "entryKey": entryKey})
        })
            // Run this function when the datastore update is complete
                .done(function( data ) { // check why I use done
                    $('.' + name).text(data[0]);
                    $('.' + rate).text(data[1]);
                });
    }

我希望在更新评分后我的订单会更新。换句话说，每次点击链接时，必须检查订单是否正确。

Answer 1

这需要三个步骤：

从DOM中分离smallData项并存储在数组中
Sort评估HTML元素（确保执行integer comparison）
将结果追加回主<div>

你可以在jQuery的一行中写这个，但是这是一个稍微冗长的可运行的例子：

$("#reorder").on("click", function() {
  //detach the smallData divs from the DOM
  var smallDatas = $(".data .smallData").detach().toArray(); 
  
  //sort the HTML elements by rating (make sure to do an integer comparison)
  smallDatas.sort(function(a,b) {
    return parseInt($(a).find(".rating").text(), 10) > parseInt($(b).find(".rating").text(), 10);
  });
  
  //append the results back into the main div
  $(".data").append(smallDatas);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="data">
  <div class="smallData">
    <span class="rating">100</span>
  </div>
  <div class="smallData">
    <span class="rating">40</span>
  </div>
  <div class="smallData">
    <span class="rating">20</span>
  </div>
  <div class="smallData">
    <span class="rating">10</span>
  </div>
  <div class="smallData">
    <span class="rating">5</span>
  </div>
</div>
<button id="reorder">reorder</button>

使用jquery对div进行排序

1 个答案: