Question

我需要重新排序 li，其中包含基于在单独字符串中找到的相同唯一相同长度分号分隔文本的位置的唯一相同长度文本，如下例所示：

li elements ...

<ul>
<li><span>28dg4</span></li>
<li><span>jjk63</span></li>
<li><span>HN3gE</span></li>
<li><span>k213C</span></li>
</ul>

...按分号分隔的子串（从左到右）排序，

<div id="string">HN3gE;28dg4;k213C;jjk63</div>

...必须像这样重新排序li：

<ul>
<li><span>HN3gE</span></li>
<li><span>28dg4</span></li>
<li><span>k213C</span></li>
<li><span>jjk63</span></li>
</ul>

我已经设置了一个小提琴，但无法制定approrpiate比较功能（对我来说是新的）： http://jsfiddle.net/ysec0ydp/16/

也许我不能使用排序，应该使用别的东西？我没有在这里或其他地方找到任何特别符合我想要的东西;-( Thx for pointers。

更新

以下代码输出正确的字符串顺序，但不会显示为附加的li：

<div id="string">tree$1234567890;boat$4567321890;9876512340;1736925408</div>

<ul>
    <li><span>1234567890</span></li>
    <li><span>1736925408</span></li>
    <li><span>4567321890</span></li>
    <li><span>9876512340</span></li>
</ul>

var ul = $('ul');
var li = ul.children("li");

var my_list = li.map(function() {
return $(this).find('span').text();
}).get();

var my_string = $.map($("#string").text().split(/;/), function (t) {
return t.replace(/^.*\$/, "");
});

li.detach();
temp = [];


for (i = 0; i < my_string.length; i++) {
for (j = 0; j < my_list.length; j++) {
if ( my_string[i] == my_list[j] ) {
temp.push(my_list[j]);
}
}
}

$("ul").append( temp );

//  RESULT is one li: 1234567890456732189098765123401736925408

//  instead of the 4 reordered li: 1234567890
                                   4567321890
                                   9876512340
                                   1736925408

如何解决这个问题？请参阅小提琴：http://jsfiddle.net/ysec0ydp/19/

Answer 1

你走了：

var orderBy = $('#string').text().split(';');

var $newUl = $('<ul></ul>');

var $myList = $('#my-list');    // gave id="my-list" to your list to identify it.
orderBy.forEach(function(key){
    $newUl.append($myList.find('li').filter(function(idx, li){ return $(li).text() === key; }).detach());
});

$myList.append($newUl.html());

我冒昧地给你的名单上了一个id以识别它。

小提琴here。

jQuery 2.1.0 |根据单独的分隔字符串重新排序li

1 个答案: