Example

Question

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

<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/

Answer 1

你可以做两件事来使它变好。首先，制作一个排序方法以满足您的需求（我通过内部HTML的alpha，pik你的毒药）。其次，为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可能会更好地满足您的需求。正如我之前提到的，您可以按照自己喜欢的方式安排排序功能。

Answer 2

如果您想要原始顺序中的所有五个元素，则需要同时移动它们。使用.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/

如何重新排列列表？

2 个答案:

Example