jQuery如何切換li裏面的位置ul

我有一大堆裏面有無序列表。jQuery如何切換li裏面的位置ul

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
    <li>item 5</li> 
    <li>item 6</li> 
</ul>

什麼，我想實現的是，如果我點擊<li>item 2</li>將切換指數與<li>item 1</li>換句話說項目2項變爲1，如果我點擊新項目2這是以前的項目1，它具有隻要點擊第2項，就可以再次切換並保持連續循環。 3,4和5,6也應該如此。

來源

2016-10-05 lvekua

第一個開關很容易理解......其他人不太清楚......他們總是去頂部和頂部去他們的位置？你試過了什麼？你應該顯示你曾經試圖解決這個問題的代碼，我們幫助解決任何問題 – charlietfl

項目3和4應該在5和6之間切換它們之間的位置並且相同 – lvekua

如果要發生切換配對項目之間ONLY（即1-2，3-4，5-6等）

工作撥弄here

$('ul li').on('click', function(e){ 
    var index = $(this).index(); // Index of clicked item 
    var temp = $(this).html(); // Contents of clicked item 
    var partner;     // The paired element 

    if((index+1) % 2 == 0) { // Even 
     partner = $(this).parent().find('li').get(index-1); 
    }else { // Odd 
     partner = $(this).parent().find('li').get(index+1); 
    } 

    // Put this in a try/catch to not throw errors for unmatched list items 
    // (i.e. a list with 9 items, and then clicking on the 9th) 
    try{ 
     $(this).html(partner.innerHTML); 
     $(partner).html(temp); 
    }catch(e) {} 
});

這樣做是：

獲取點擊的項目
的索引和內容來確定是否點擊是奇數還是偶數
分配適當的合作伙伴元素
內容交換（如果夥伴元素存在）

跟隨t他同樣的模式進行切換，你想用insertBefore()和insertAfter()

// add attributes to elements for pairing 
$('li').each(function(i) { 
    var partner = i % 2 == 0 ? i + 1 : i - 1 
    $(this).attr({ id: i,'data-index': i,'data-partner': partner}) 
}).click(function() { 
    var $el = $(this), 
     currIdx = $el.index(),  
     origIdx = $el.data('index'), 
     partnerIdx = $el.data('partner'), 
     dir; 
    if (currIdx != origIdx) { 
    dir = partnerIdx > origIdx ? 'After' : 'Before' 
    } else { 
    dir = partnerIdx > origIdx ? 'Before' : 'After' 
    } 
    $('#' + partnerIdx)['insert' + dir](this) 
});

來源

2016-10-05 00:52:08 Birrel

這是乾淨優雅的代碼先生。 '模數'和'try'' catch'方法的使用是很大的風險。 –

@亞歷山大·迪克森謝謝。我相信有人會有一個2線解決方案，否則說，但它完成了足夠好的工作。 Upvotes也有幫助，因爲它現在是頂級賽事！ – Birrel

@Birrel你是我的英雄！ – lvekua

您的描述不是很清楚，像charlietfl說你應該提供任何代碼，您試圖爲您標記這是JavaScript來做到這一點不只是HTML，反正你可以嘗試這樣的事：

$("ul").on("click", "li" , function(){ 
    var text = $(this).text(); 
    $(this).remove(); 
    $("ul").prepend("<li>"+text+"</li>"); 
});

來源

2016-10-05 00:33:13

解決方案無論項目如果在年底夥伴不可用jQuery選擇將失敗悄悄

DEMO

來源

2016-10-05 01:12:25 charlietfl

insertAfter和insertBefore的一個非常有趣的用法。非常感謝 – gaetanoM

@gaetanoM人們有時會忘記所有的鏈式方法都只是對象屬性。 – charlietfl

大聲笑是ul的號碼

$("#lol li:odd").click(function() 
     { 
      var $preSibiling = $(this).prev(), 
       prevValue = $preSibiling.text(), 
       presentValue = this.innerText; 
      $preSibiling.text(presentValue); 
      this.innerText = prevValue; 

     })

來源

2016-10-05 01:35:55

jQuery如何切換li裏面的位置ul

回答

相關問題