dongshuming7131 2013-11-20 18:47
浏览 33
已采纳

jQuery和PHP:如何按类重新排序列表项?

Firstly, sorry for my bad english, I hope I'll explain well my problem...

So, I'm trying to learn developping and actually I have this code :

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

The UL populates automaticly with smarty, so at the end my HTML is like this :

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

My problem is that I want to alternate EVEN and ODD classes with jQuery or PHP, but I didn't find how. I would like to make this :

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

Can somebody tell me how I need to do this please?

Thank you!

  • 写回答

4条回答 默认 最新

  • dua27031 2013-11-22 14:32
    关注

    I find how to do this. Thank you all for helping me ! Here's the code for someone in my situation :

    $(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);
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)