Javascript在元素中获取类文本

Question

我的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()

Answer 1

var elems = $(".span4");

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

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

FIDDLE

Answer 2

试试这个：

function sortAlphaAsc(a,b){  
    var nomeA = $(a).find('div.header').text();
    var nomeB = $(b).find('div.header').text();
    return nomeA.toLowerCase() > nomeB.toLowerCase();  
};

Answer 3

您可以分离跨度，排序并附加它们。 这也将非常快，因为更改内存中的元素并且最终只更新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)。

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

DEMO - 分离跨度，对它们进行排序并再次追加

Answer 4

你的意思是这样的：

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

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