2

我的 html 中有一堆 span4 类元素。它们看起来像这样：

    <div class="span4">
        <div class="widget">
            <div class="header">blablabla</div>
        </div>
    </div>

我想按该文本 iside 标题类对 span4 进行排序。

我这样做是为了对它们进行排序

$(".span4").sort(sortAlpha)

但是如何选择标题类中的文本？

我正在这样做，但我想有更好的方法

    function sortAlphaAsc(a,b){  
        var nomeA = $(a.childNodes[1].childNodes[1]).text();
        var nomeB = $(b.childNodes[1].childNodes[1]).text();
        return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
    };

一定有比这更好的方法

$(a.childNodes[1].childNodes[1]).text()
4

4 回答 4

3 
var elems = $(".span4");

elems.sort(function(a, b) {
    return $(a).find('.header').text().toUpperCase().localeCompare(
         $(b).find('.header').text().toUpperCase()
    );
});

$(".span4").parent().html(elems);​

小提琴

于 2012-12-14T16:27:59.463 回答
2

尝试这个：

function sortAlphaAsc(a,b){  
    var nomeA = $(a).find('div.header').text();
    var nomeB = $(b).find('div.header').text();
    return nomeA.toLowerCase() > nomeB.toLowerCase();  
};
于 2012-12-14T16:26:49.200 回答
2

您可以分离跨度，对它们进行排序和附加。这也将非常快，因为更改内存中的元素并且最终只更新一次 DOM 非常有效。

var $spans = $(".span4").detach();

var sortedSpans = $spans.sort(function(spanA, spanB) {
    var spanTextA = $("div.header", spanA).text();
    var spanTextB = $("div.header", spanB).text();
    
    return spanTextA > spanTextB;
});

$("body").append(sortedSpans);

显然，而不是body将其附加回它的实际容器元素。

或者，如果跨度位于公共容器中，则将父级存储在缓存var $parent = $spans.parent()中，最后只需执行 $ parent.html(sortedSpans)。

我不知道你的全部标记，但这应该让你开始。

演示- 分离跨度，对它们进行排序并再次附加

于 2012-12-14T16:38:10.680 回答
1

你的意思是这样的：

$('.span4').find('.header').text();

这将返回标题 div 内的文本。

于 2012-12-14T16:28:23.080 回答