jQuery & PHP：如何按类重新排序列表项？答案

【问题标题】：jQuery & PHP : How can I reorder a list items by their class?jQuery & PHP：如何按类重新排序列表项？
【发布时间】：2013-12-04 22:38:00
【问题描述】：

首先，对不起我的英语不好，我希望我能很好地解释我的问题......

所以，我正在尝试学习开发，实际上我有这个代码：

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

我的问题是我想用 jQuery 或 PHP 替换 EVEN 和 ODD 类，但我没有找到方法。我想做这个：

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

谁能告诉我我需要怎么做？

谢谢！

【问题讨论】：

您确定不想在 smarty 循环中处理这个问题吗？
1) 你应该更新你的服务器端代码，应该只有 1 个循环生成奇数和偶数项，交替类。 2）您可能还想检查 CSS 伪类 :nth-child(odd) 和 :nth-child(even)，这是一种更简洁的方式来执行您可能尝试执行的操作，但旧浏览器不支持
您好，这里提出的解决方案是为奇数或偶数元素添加类。但我需要重新排序。我想说我的第一个循环将始终显示在 ODD 列中，而我的第二个循环将始终显示在 EVEN 列中。我认为也可以在 php 中实现，但我不知道如何... 可能我的循环代码会对您有所帮助？我将编辑我的帖子。谢谢你帮助我！
如果你想要两列，制作两个不同的 uls 并用 css 将它们放在一起不是更容易（而且更合乎逻辑）吗？那么你最终会得到两个列表，一个用于产品，另一个用于类别。仅仅出于演示的原因随机打乱数据似乎并不正确

标签： php jquery list smarty reorderlist

【解决方案1】：

您的代码似乎有点复杂：

$(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/。

【讨论】：

【解决方案2】：

尝试使用 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/

【讨论】：

【解决方案3】：

为什么不直接使用 smarty 的cycle：

 <li class="{cycle values="odd,even"} ajax_block_product....

【讨论】：

是的，我也试过了，但是我的 2 <LI> 有不同的循环显示内容。第一个<LI> 显示产品，第二个显示类别，然后我的<UL> 自动从数据库中填充。在第一位置，我有我所有的产品，什么时候我有我所有的产品类别。所以我想混合它们来展示：一个产品，一个类别，一个产品，一个类别......但我是一个初学者，我不知道如何在 2 <LI> 之间切换以使它们出现在这个订购。

【解决方案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);
});

【讨论】：