javascript - 将最后一个孩子移动到第一个位置不起作用jquery

Question

我尝试在单击时将列表中的最后一个元素移动到第一个位置，但它不起作用。我是根据这个问题的答案做的：将最后一个孩子移到第一个位置。Firebug 告诉我列表发生了一些事情，但它肯定不是最后一次更改 :(

jQuery：

$(document).ready(function(){   
    $(".carousel-button-left").click(function(){
    var $ul=$(this).next();                 
    var $lastchild=$ul.children().last();
    $ul.prepend($lastchild);
    });
});

HTML：

<div class="testowyDiv">
    <img class="carousel-button-left" src="ikony/strzalkal.png">
    <div class="testowyDiv2">
        <ul class="testowyUl">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <img class="carousel-button-right" src="ikony/strzalkap.png">
</div>

Answer 1

$(document).ready(function(){   
    $(".carousel-button-left").click(function(){
    var $ul=$(this).next().find(".testowyUl");   // by next we reach on next div then by find we reach on ul               
    var $lastchild=$ul.children().last();
    $ul.prepend($lastchild);
    });
});

Answer 2

$(document).ready(function(){   
    $(".carousel-button-left").click(function(){
    var $ul=$(".testowyUl");  //do you need node traversing, if not use direct, better keep a id for it 
    var lastchild=$ul.children().last();
        console.log(lastchild.val());
    $ul.prepend(lastchild);
    });
});

演示-小提琴

Answer 3

使用 prepend 或 insertBefore。

样本：

$(document).ready(function(){   
    $('.carousel-button-left').click(function() {
        var first = $('.testowyUl li:first');
        var last = $('.testowyUl li:last');
        last.insertBefore(first);
    });
});