2

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

<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？有人可以帮我解决这个问题吗？这是 JsFiddle http://jsfiddle.net/NTPd4/2/

4

2 回答 2

1

你可以做两件事来让一切都好起来。首先，制定一种适合您需求的排序方法（我通过内部 html 的 alpha，pik 你的毒药）。其次，为 jQuery 对象创建一个变量，您也可以简单地添加元素。

接下来，在 if 语句中使用变量来收集所需的元素。然后在插入之前，对它们进行排序！

例子

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会自动对它们进行排序，但请记住，您也可以直接使用 sort 函数，例如：

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

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

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

但是，sortAlpha从长远来看，这可能会更好地满足您的需求。正如我之前提到的，您可以按照自己的喜好安排排序功能。

于 2013-06-27T18:05:52.170 回答
0

如果您希望所有五个元素都按原始顺序排列，则需要同时移动它们。用于.add()组合它们：

$('.sub3, .sub5, .sub8').add('.sub3, .sub4, .sub7').prependTo($('.subjects'));

或者，将其集成到您的代码中：

var $selector = $();    
if ($('li.cat1').hasClass('active')) {
    $selector = $selector.add('.sub3, .sub5, .sub8');
}
if ($('li.cat2').hasClass('active')) {
    $selector = $selector.add('.sub3, .sub4, .sub7');
}
$selector.prependTo('.subjects');

http://jsfiddle.net/mblase75/GYfpv/

于 2013-06-27T17:44:01.803 回答