7

Вопрос по sorting, html, jquery, javascript – JQuery организовать заказ, нажав на ссылку

Необходимо изменить положение li, нажимая для перемещения вверх или вниз.

<div>
  <ul>
    <li>Item1  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item2  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item3  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item4  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item5  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
  </ul>
</div>

Итак, что здесь должно произойти, например, если мы нажмем «Переместить вверх» на элементе 2, элемент 2 переместится вверх до элемента 1.

Я пытался сделать так, но это не работает:

$(".moveUp").click(function () {
    var thisLine = $(this).parent();
    var prevLine = thisLine.prev();
    prevLine.insertAfter(thisLine);
});

Надеюсь, кто-нибудь может мне помочь...

  • Error: User Rate Limit Exceeded

    от user1309015
  • Error: User Rate Limit Exceeded

    от user1309015
  • Error: User Rate Limit Exceeded

    от user1309015
  • Error: User Rate Limit Exceeded

    от user1309015
  • Если есть ответ, который сработал для вас, отметьте его как принятый ответ

    от JakeJ
5 ответов
  • 0

    on('click', 'a', function(){

    http://jsfiddle.net/j7xtS/2/

    $('ul').    var $this = $(this),
            $li = $this.parent();
    
        if ($this.hasClass('moveUp') &&  $li.prev().length>0){
            $li.prev().before($li[0]);
        }
        else if ($this.hasClass('moveDown') && $li.next().length>0){
            $li.next().after($li[0]);
        }
    });​
    

  • 6

    Попробуй это:

    $(".moveUp").click(function () {
        var thisLine = $(this).parent();
        var prevLine = thisLine.prev();
        prevLine.before(thisLine);
    });
    
    $(".moveDown").click(function () {
        var thisLine = $(this).parent();
        var prevLine = thisLine.next();
        prevLine.after(thisLine);
    });
    

    Рабочая jsFiddleВот.

  • 3

    Попробуй это.

    $(".moveUp").click(function () {
        var $parent = $(this).parent();
        $parent.prev().before($parent);
    });
    $(".moveDown").click(function () {
        var $parent = $(this).parent();
        $parent.next().after($parent);
    });
    

    Рабочая демо -http://jsfiddle.net/vQmHU/

  • 2

    Это должно работать и также не будет перемещать элемент за пределы UL

    когда вы пытаетесь переместить его вверху или внизу:

    $('.moveUp').click(function(){
        var liItem = $(this).parent();
        if (liItem.prev().is('li'))
        {
            liItem.insertBefore(liItem.prev())
        }
    });
    
    $('.moveDown').click(function(){
        var liItem = $(this).parent();
        if (liItem.next().is('li'))
        {
            liItem.insertAfter(liItem.next())
        }
    });
    

    Рабочий пример:http://jsfiddle.net/BDecp/

    Кроме того, ваш код должен быть заключен в это:

    $(document).ready(function () {
        //Code Here
    });
    

  • 1

    этот только переставляет элементы списка:

    $(".moveUp").click(function () {
      var $parent = $(this).parent().closest("li");
      $parent.prev().before($parent);
    });
    
    $(".moveDown").click(function () {
      var $parent = $(this).parent().closest("li");
      $parent.next().after($parent);
    });