Question

我有这个HTML列表<ul>，其中包含两个不同类的列表项。

<ul id="Items">
    <li class="sw">Switchable 1</li>
    <li class="sw">Switchable 2</li>
    <li class="notsw">This should remain 3</li>
    <li class="sw">Switchable 4</li>
    <li class="notsw">This should remain 5</li>
    <li class="sw">Switchable 6</li>
</ul>

<input type="button" class="btn" value="Shuffle" />

我试图在触发事件时随机化或随机播放列表项的顺序（让我们说一个按钮被点击），但只使用.sw类对列表项进行随机播放。到目前为止，我已经使用jQuery自定义函数实现了对列表项（所有这些）的混乱。然后，我尝试存储.notsw列表项的初始索引（我认为我得到正确的值）并使用jQuery .before()在shuffle之后将其移回但仍然可以＆＃ 39;让它走到应有的位置。

注意：带有.notsw类的列表项最初可能位于列表中的任何位置。

jQuery的：

$('.btn').click(function(){
    var notsws = document.getElementsByClassName("notsw"); 
    var inds = new Array();
    for(var i=0; i<notsws.length; i++){
        inds[i] =$('.notsw').eq(i).index();
    }
    $('#Items').randomize();
    for(var k=0; k<notsws.length; k++){
        var curr = inds[k];
        $('.notsw').eq(k).before($('#Items li').eq(curr));
    }
});       


$.fn.randomize = function(selector){
    var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

    $parents.each(function(){
        $(this).children(selector).sort(function(){
            return Math.round(Math.random()) - 0.5;
        }).remove().appendTo(this);
    });

    return this;
};

I HAVE A JSFIDDLE EXAMPLE HERE

Answer 1

我使用了另一种方法。我看到你正在随机化你的列表，然后试着记住原始元素是否是。

而不是那样，为什么不根据他们是否可以改组来改变元素。从某种意义上说，为选择器switchable elements表示的.sw取一个索引数组，然后只对那些索引进行洗牌。

这是shuffle函数的样子。

function shuffle(nodes, switchableSelector) {
    var length = nodes.length;

    //Create the array for the random pick.
    var switchable = nodes.filter("." + switchableSelector);
    var switchIndex = [];

    $.each(switchable, function(index, item) {
       switchIndex[index] = $(item).index(); 
    });

    //The array should be used for picking up random elements.
    var switchLength = switchIndex.length;
    var randomPick, randomSwap;

    for (var index = length; index > 0; index--) {
        //Get a random index that contains a switchable element.
        randomPick = switchIndex[Math.floor(Math.random() * switchLength)];

        //Get the next element that needs to be swapped.
        randomSwap = nodes[index - 1];

        //If the element is 'switchable' continue, else ignore
        if($(randomSwap).hasClass(switchableSelector)) {
            nodes[index - 1] = nodes[randomPick];
            nodes[randomPick] = randomSwap;
        }
    }

    return nodes;
}

在按钮上单击，您可以简单地随机播放节点，然后将它们重新附加到容器中。

$(".btn").click(function() {
    var $nodes = $("#Items").find("li");
    shuffle($nodes, "sw");
    $("#Items").append($nodes);
});

Working fiddle present here

Answer 2

您正在做的是删除所有"sw"元素，然后将其推送到列表后面。我将使用"sw"项创建一个新的随机列表，然后在其先前的索引处添加"notsw"项。因此，您应该保存"notsw"索引。

随机化或随机播放除具有特定类</ul>的列表项之外的<ul>项

2 个答案: