jQuery & PHP: Как я могу изменить порядок элементов списка по их классу?

Во-первых, извините за мой плохой английский, я надеюсь, я хорошо объясню мою проблему...

Итак, я пытаюсь научиться развиваться, и на самом деле у меня есть этот код:

<ul>
    <li class="odd ajax_block_product {if $smarty.foreach.myhomeFeaturedProducts.first}first_item{elseif $smarty.foreach.myhomeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.myhomeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.myhomeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.myhomeFeaturedProducts.iteration > ($smarty.foreach.myhomeFeaturedProducts.total - $totModulo)}last_line{/if}">...</li>    
    <li class="even ajax_block_category {if $smarty.foreach.myhomeFeaturedCategories.first}first_item{elseif $smarty.foreach.myhomeFeaturedCategories.last}last_item{else}item{/if}">...</li>
</ul>

UL автоматически заполняется smarty, поэтому в конце мой HTML выглядит так:

<ul>
    <li class="odd">1</li>     
    <li class="odd">2</li>
    <li class="odd">3</li>     
    <li class="odd">4</li>

    <li class="even">5</li>     
    <li class="even">6</li>
    <li class="even">7</li>     
    <li class="even">8</li>
</ul>

Моя проблема в том, что я хочу чередовать EVEN и ODD классы с jQuery или PHP, но я не нашел как. Я хотел бы сделать это:

     <ul>
        <li class="odd">1</li>     
        <li class="even">5</li>
        <li class="odd">2</li>     
        <li class="even">6</li>

        <li class="odd">3</li>     
        <li class="even">7</li>
        <li class="odd">4</li>     
        <li class="even">8</li>
    </ul>

Может кто-нибудь сказать мне, как мне нужно сделать это, пожалуйста?

Спасибо!

Источник

4 ответа

Решение

Я нахожу, как это сделать. Спасибо всем за помощь! Вот код для кого-то в моей ситуации:

$(function () {
    var $oddArray = new Array();
    var $evenArray = new Array();
    $('ul#shuffle li').each(function () {
        if ($(this).hasClass('product')) {
            $oddArray.push($(this).html());
        } else {
            $evenArray.push($(this).html());
        }
    });
    var newLi = new Array();
    var index;
    var oddIndex = 0;
    var evenIndex = 0;
    for (index = 0; index < ($oddArray.length + $evenArray.length); index++) {
        if (index % 2 == 0) {
            console.log("ODD");
            if ($oddArray[oddIndex] != undefined)
                newLi += '<li>' + $oddArray[oddIndex] + '</li>';
            oddIndex++;
        } else {
            console.log("EVEN");
            if ($evenArray[evenIndex] != undefined)
                newLi += '<li>' + $evenArray[evenIndex] + '</li>';
            evenIndex++;
        }
    }
    delete $oddArray;
    delete $evenArray;
    $('ul#shuffle').html(newLi);
});
Источник

Ваш код кажется немного сложным:

$(function () {
    var $items = $('li');
    var odd = $items.filter('.odd').get();
    var even = $items.filter(':not(.odd)').get();
    var mixed = [];
    while (odd.length) {
        mixed.push(odd.shift());
        if (even.length) {
            mixed.push(even.shift());
        }
    }
    if (even.length) {
        mixed = mixed.concat(even);
    }
    $('ul').append(mixed);
});

Вот демо: http://jsfiddle.net/wared/unzxv/.

Источник

Почему бы просто не использовать цикл smarty:

 <li class="{cycle values="odd,even"} ajax_block_product....
Источник

Попробуйте использовать CSS : псевдо-класс nth-child, как показано ниже,

li:nth-child(even) { color: green; }
li:nth-child(odd) { color: blue; }

http://www.w3.org/Style/Examples/007/evenodd.en.html

ДЕМО: http://jsfiddle.net/UCBGJ/

Источник
Другие вопросы по тегам