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

あなたはそれをすべて良くするために2つのことをすることができます. まず、ニーズに合わせて並べ替え方法を作成します (私は内部 html のアルファで行って、あなたの毒を選びました)。次に、単純に要素を追加できる 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はそれらを自動的にソートすると思いますが、次のようにソート機能を簡単に使用することもできることに注意してください。

$('.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

5 つの要素すべてを元の順序に戻したい場合は、それらを同時に移動する必要があります。.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 に答える