jQuery：使用eq

Question

重新安排列表項目我正在使用3個項目的導航欄上工作。當你點擊一個項目時，項目順序應該重新排列，以便點擊的項目位於中心（水平導航欄）。這裏是到目前爲止的代碼：

$('li').mousedown(function(e){ 
    $('li').addClass('flanking'); 
    $(this).removeClass('flanking'); 

    $('ul li:eq(0)').after($(this)); 

    if($(this) == '(ul li:eq(0)'){ 
     $('ul li:eq(2)').prependTo('ul'); 
    }; 
}); 

這適用於重新排列三的第二個和最後一個地方列表項，但如果您單擊第一個。我已經嘗試將if語句（打算捕獲列表中的第一個項目是否被點擊）更改爲以下內容

if($(this) == $('ul li:eq(0)')){ 
    $('ul li:eq(2)').prependTo('ul'); 
}; 

哪一個也不起作用。我如何檢查點擊'li'是否是'ul'中的第一個，然後將它移動到中間？謝謝閱讀。

編輯：請參閱JaakKütt對可擴展解決方案和工作演示的回答，Gokhan Arik使用eq和if語句的正確語法，以及Birrel的一些非常棒的動畫。

Answer 1

更改if聲明這一點，

if($(this)[0] == $('ul li:eq(0)')[0]){ 
     $('ul li:eq(2)').prependTo('ul'); 
}; 

當你比較的東西你會犯錯。 jQuery選擇器返回對象數組。

Answer 2

編輯：想出了一個更通用的解決方案，它不關心列表中有多少元素，並將點擊的元素放置在中間（如果有偶數個元素，則放置在最靠近中心的位置）按照從上到下的方向推動從點到點之間的元素。

This jsFiddle example功能4個不同長度的列表（在<li>和<p>兄弟姐妹的例子）和較少的換行符。

$('li').mousedown(function (e) { 
    var self = $(this), 
     length = self.siblings().length + 1, 
     middle = length/2 - 1, 
     list = self.parent().children(), 
     i = self.index() - 1; 
    if (length % 2) { 
     $()[i < middle ? 'after' : 'before'].call(
      list.eq(Math.round(middle)), 
      self 
     ); 
    } else { 
     list.eq(
      Math[i < middle ? 'ceil' : 'floor'].call(null, middle) 
     ).after(self); 
    } 
}); 

PS1：去掉了「側翼」類業務OP從例子有，因爲它是不給functuality其餘真正相關。

PS2：任何努力微調參與將有我感謝代數：d

Answer 3

Here是一個帶有動畫，現在在Chrome中正常工作。

HTML：

<div class="wrapper"> 
    <ul> 
     <li class="flank_left">1</li> 
     <li class="middle">2</li> 
     <li class="flank_right">3</li> 
    </ul> 
</div> 

CSS：

* { 
    padding: 0px; 
    margin: 0px; 
} 
.wrapper { 
    width: 310px; 
    position: relative; 
    margin: 10px; 
} 
ul li { 
    display: block; 
    width: 100px; 
    height: 25 px; 
    background: #099; 
    cursor: pointer; 
    float: left; 
} 
.flank_left { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.flank_right { 
    position: absolute; 
    top: 0px; 
    left: 210px; 
} 
.middle { 
    position: absolute; 
    top: 0px; 
    left: 105px; 

} 

的JavaScript：

$('li').click(function() { 
    // If not middle element and if not animated... 
    if (!$(this).hasClass('middle') && !$('.middle').is(':animated')) { 

     if($(this).hasClass("flank_left")){ // If flank_left 
      $(this).switchClass("flank_left", "middle", 1000); 
      $('.middle').switchClass("middle", "flank_left", 1000); 
     }else{ // if flank_right 
      $(this).switchClass("flank_right", "middle", 1000); 
      $('.middle').switchClass("middle", "flank_right", 1000); 
     } 
    } 
}); 

注：有TWO您需要的外部資源。你可以找到他們並下載他們here和here

Answer 4

我已經實施了重新安排列表項與動畫。要求是，我有五個要素：

1 2 3 4 5 

和重新排列順序一樣，當點擊第1個要素上放置它的位置在中心這樣的：

5 4 1 2 3 

你可以檢查我的小提琴：Jsfiddle

$('.horizontal li').on('click', function (e) { 
    $(this).addClass('active').siblings().removeClass('active'); 
    var tparent = $(this).parent(); 
    var childs = tparent.children().length; 
    var eachWidth = this.clientWidth + 10; 
    var middle = eachWidth * (parseInt(childs/2)); 
    var rowChild = $(this).parent().children('li'); 
    var currentIndex = rowChild.index($(this)); 

    rowChild.each(function (li) { 
     if ($(this).attr("POS")) { 
      cp = $(this).attr("POS"); 
     } else { 
      $(this).attr("POS", li); 
     } 
    }); 

    function animateEach() { 
     rowChild.each(function (li) { 
      var _minePos = $(this).position().left; 
      var cp = $(this).attr("POS"); 
      var _newPos = cp * eachWidth; 

      $(this).animate({ 
       left: (cp - li) * eachWidth, 
      }, 40, function() { 
       // checkPOS(); 
      }); 
     }); 
     setTimeout(checkPOS(true), 40); 
    } 

    var currentelement = $(this); 
    var currentIIN = $(this).attr("POS"); 

    function checkPOS(ee) { 
     if (currentIIN != 2) { 
      rowChild.each(function (li) { 
       var eachPOS = $(this).attr("POS"); 
       if (eachPOS >= 4) { 
        $(this).attr("POS", 0); 
       } else { 
        $(this).attr("POS", parseInt(eachPOS) + 1); 
       } 
      }); 
      currentIIN = currentelement.attr("POS"); 
      animateEach(); 
     } else { 
      if (ee) currentelement.addClass('active'); 

     } 
    } 

    checkPOS(); 

p { 
    margin: 1px; 
    cursor: pointer; 
} 
li { 
    cursor: pointer; 
} 
ul.horizontal { 
    clear: both; 
    display: block; 
    height: 40px; 
} 
ul.horizontal li { 
    float: left; 
    /*background: #ccc;*/ 
    display: block; 
    margin-left: 10px; 
    padding: 5px; 
    position: relative; 
} 
.ul.horizontal .li.a { 
    border:2px solid #fb7d1e; 
    font-size: 50px; 
} 
.horizontal li.active { 
    /*background:silver;*/ 
    font-weight:bold; 
    color:blueviolet; 
    font-size: 20px; 
    /*height: 150px;*/ 
    /*width:150px;*/ 
    webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    -ms-transform: scale(1.2); 
    -o-transform: scale(1.2); 
    transform: scale(1.2); 
    /*border:1px solid ;*/ 
    /*border-radius: 1em;*/ 
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff; 
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff; 
    box-shadow: 0 58px 36px -56px #7ac9ff; 
} 
/*background: #ccc;*/ 
display: block; 
margin-left: 10px; 
padding: 5px; 
position: relative; 

} 
.ul.horizontal .li.a { 
    border:2px solid #fb7d1e; 
    font-size: 50px; 
} 
.horizontal li.active { 
    /*background:silver;*/ 
    font-weight:bold; 
    color:blueviolet; 
    font-size: 20px; 
    /*height: 150px;*/ 
    /*width:150px;*/ 
    webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    -ms-transform: scale(1.2); 
    -o-transform: scale(1.2); 
    transform: scale(1.2); 
    /*border:1px solid ;*/ 
    /*border-radius: 1em;*/ 
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff; 
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff; 
    box-shadow: 0 58px 36px -56px #7ac9ff; 
} 

檢查我Jsfiddle