Question

我有一个包含行的表（在下面的情况下为div）。在这些行中是具有文本的节点。我试图查看内部文本并根据内部文本对行进行排序。我按文本排序，只是不知道如何以正确的顺序将节点放回到屏幕上。这就是我所拥有的：

<div>
    <i> - Name: Casper</i><br/>
</div>
<div>
    <i> - Name: Joe</i><br/>
</div>
<div>
    <i> - Name: Allen</i>
</div>


var originalNameNodes = $('i:contains(" - Name:")');
var numNames = originalNameNodes.length;
var namesForSorting = []

var i = 0;
originalNameNodes.each(function(){    
    namesForSorting[i] = $(this).text().replace(" - Name: ", "");    
    i = i + 1;
});

namesForSorting.sort();

for(var j = 0; j < numNames; j++){
    var sortedNameNode = originalNameNodes.find('i:contains('+namesForSorting[j]+')');
    $('body').append(sortedNameNode);    
}

Answer 1

你这样做是这样的：

var elems = $('div').filter(function() {
        return $('i', this).text().indexOf('Name:');
    }),
    parent = elems.first().parent();

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

$.each(elems, function(idx, itm) { parent.append(itm); });

FIDDLE

首先我们得到div，然后我们定位所有div并过滤它们，只返回包含元素的div，如果元素包含字符串'Name:' <登记/> 有很多方法可以获得div，我只是选择了这个。

因为他们的div是标记中的所有兄弟，所以只需要获得第一个的父级，或者我们甚至可以使用像$('body')这样的选择器或其他任何使我们成为包含div的父元素的选择器。

sort()函数就是它发生的地方，我们不对元素进行排序，而是对<div>元素进行排序，因为这样更容易，然后我们只查找文本子元素并比较a > b等，并根据中的文本对元素数组进行排序，因此我们所要做的就是在DOM中重新排列它们，我们在循环中使用append()来按照与我们排序的数组相同的顺序移动元素。

通过提取内部文本对节点进行排序，并在jQuery中维护索引关联或破解

1 个答案: