Question

这是我需要排序的HTML div：

<div id="divtosort">
    <div class="datasort" data-order="2">2</div>
    <div class="datasort" data-order="4">4</div>
    <div class="datasort" data-order="1">1</div>
    <div class="datasort" data-order="3">3</div>
</div>

我正在使用此功能对div进行排序：

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}

当我将此行输入控制台时：

getSorted('.datasort', 'data-order')

我得到了这个结果：

[ <div class="datasort" data-order="1">1</div>, <div class="datasort" data-order="2">2</div>, <div class="datasort" data-order="3">3</div>, <div class="datasort" data-order="4">4</div>]

问题是，如何将此结果转换为实际的HTML，我可以用？

替换现有的HTML

Answer 1

问题是，如何将此结果转换为实际的HTML，我可以用？
替换现有的HTML

你已经拥有了。在这个例子中，我使用的是jQuery的.html函数，它将替换它所调用的节点的HTML内容：

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}


var sorted = getSorted('.datasort', 'data-order');

$('#divtosort').html(sorted);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divtosort">
    <div class="datasort" data-order="2">2</div>
    <div class="datasort" data-order="4">4</div>
    <div class="datasort" data-order="1">1</div>
    <div class="datasort" data-order="3">3</div>
</div>

Answer 2

Fiddle

HTML

reactivemongo.core.errors.ConnectionNotInitialized: MongoError['Connection is missing metadata (like protocol version, etc.) The connection pool is probably being initialized.']
at reactivemongo.core.errors.ConnectionNotInitialized$.MissingMetadata(errors.scala:71)
at reactivemongo.api.collections.GenericCollection$$anonfun$insert$1.apply(genericcollection.scala:338)
at reactivemongo.api.collections.GenericCollection$$anonfun$insert$1.apply(genericcollection.scala:314)
at scala.concurrent.impl.Future$PromiseCompletingRunnable.liftedTree1$1(Future.scala:24)
at scala.concurrent.impl.Future$PromiseCompletingRunnable.run(Future.scala:24)
at scala.concurrent.impl.ExecutionContextImpl$AdaptedForkJoinTask.exec(ExecutionContextImpl.scala:121)
at scala.concurrent.forkjoin.ForkJoinTask.doExec(ForkJoinTask.java:260)
at scala.concurrent.forkjoin.ForkJoinPool$WorkQueue.pollAndExecAll(ForkJoinPool.java:1253)
at scala.concurrent.forkjoin.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1346)
at scala.concurrent.forkjoin.ForkJoinPool.runWorker(ForkJoinPool.java:1979)
at scala.concurrent.forkjoin.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:107)

Jquery的

<div id="divtosort">
    <div class="datasort" data-order="2">2</div>
    <div class="datasort" data-order="4">4</div>
    <div class="datasort" data-order="1">1</div>
    <div class="datasort" data-order="3">3</div>
</div>

Answer 3

var $sordedElemets = getSorted('.datasort', 'data-order');

$("#divtosort").append( $sordedElemets );

<强> jsBin demo

Answer 4

尝试将getSorted('.datasort', 'data-order')的结果存储在变量中然后清空ID为divtosort的div，之后将sortedList附加到div。

代码看起来有点像这样 -

var sortedList = getSorted('.datasort', 'data-order'); $('#divtosort').empty(); $('#divtosort').append(sortedList);

如何获取使用此函数排序的div的HTML？

4 个答案:

HTML

Jquery的