javascript - 如何重新排列 list ？

我正试图重新排列一个列表。例如，我有一个包含类别的列表：

<ul class="category">
    <li class="cat1 active">cat1</li>
    <li class="cat2 active">cat2</li>
    <li class="cat3">cat3</li>
    <li class="cat4">cat4</li>
</ul>

还有一张列有主题的单子

<ul class="subjects">
    <li class="sub1">sub1</li>
    <li class="sub2">sub2</li>
    <li class="sub3">sub3</li>
    <li class="sub4">sub4</li>
    <li class="sub5">sub5</li>
    <li class="sub6">sub7</li>
    <li class="sub7">sub7</li>
    <li class="sub8">sub8</li>
</ul>

我想做的是，当某个类别的类处于活动状态时，一些主题将进入列表的顶部。例如：

<ul class="subjects">
    <li class="sub3">sub3</li>
    <li class="sub5">sub5</li>
    <li class="sub8">sub8</li>

    <li class="sub1">sub1</li>
    <li class="sub2">sub2</li>
    <li class="sub4">sub4</li>
    <li class="sub6">sub6</li>
    <li class="sub7">sub7</li>
</ul>

我可以用这个代码：

if($('li.cat1').hasClass('active')){
    $('.sub3, .sub5, .sub8').insertBefore($('.subjects li:first-child'));
}

但当多个类别处于活动状态时，真正的问题就开始了。我是这样做的：

if($('li.cat1').hasClass('active')){
    $('.sub3, .sub5, .sub8').insertBefore($('.subjects li:first-child'));
}

if($('li.cat2').hasClass('active')){
    $('.sub3, .sub4, .sub7').insertBefore($('.subjects li:first-child'));
}

结果是：

<ul class="subjects">
    <li class="sub4">sub4</li>
    <li class="sub7">sub7</li>
    <li class="sub3">sub3</li>
    <li class="sub5">sub5</li>
    <li class="sub8">sub8</li>
    <li class="sub1">sub1</li>
    <li class="sub2">sub2</li>
    <li class="sub6">sub6</li>
</ul>

现在的顺序是4,7,3,5,8。这些是已选定的数字，但如何将它们重新排列为：3、4、5、7、8、1、2、6？有人能帮我一下吗？这是JsFiddlehttp://jsfiddle.net/NTPd4/2/

最佳答案

你可以做两件事让一切都好起来。首先，制作一个排序方法来满足您的需要（我通过了内部html的alpha，pik your poison）。其次，为jQuery对象创建一个变量，您也可以简单地添加元素。
接下来，使用if语句中的变量来收集所需的元素。然后在插入之前，对它们进行分类！
Example

function sortAlpha(a,b){
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
};

var activeSubjects = $();
if ($('li.cat1').hasClass('active')) {
    activeSubjects = activeSubjects.add($('.sub5, .sub3, .sub8'))
}

if ($('li.cat2').hasClass('active')) {
    activeSubjects = activeSubjects.add($('.sub3, .sub4, .sub7'))
}

activeSubjects.sort(sortAlpha).insertBefore($('.subjects li:first-child'));

我认为.add将自动对它们进行排序，但请记住，您也可以直接使用排序函数，例如：

$('.sub5, .sub3, .sub8').sort(sortAlpha);

另外，对于当前设置（除数字外，所有文本都相同），可以使用如下排序函数：

function sortNum(a,b) {
    return parseInt($(a).text().substring(3)) - parseInt($(b).text().substring(3));
}

不过，从长远来看，sortAlpha可能会更好地满足您的需求。如前所述，您可以根据自己的喜好安排排序功能。

关于javascript - 如何重新排列 list ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17349847/