Question

我有一个无序的列表，里面有很多李。

<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。

Answer 1

如果您希望在配对项目之间进行切换 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) {}
});

这是做什么的：

获取所点击项目的索引和内容
确定点击是否为奇数或偶数
分配合适的合作伙伴元素
交换内容（如果合作伙伴元素存在）

按照相同的模式切换您想要的任何项目

Answer 2

你的描述不是很清楚，就像charlietfl说你应该提供你尝试这样做的任何代码，而不仅仅是html，因为你把它标记为javascript，无论如何你可以尝试这样的事情：

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

Answer 3

使用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)
});

如果合作伙伴不可用，jQuery选择器最终会安静地失败

的 DEMO

Answer 4

lol是ul的id

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

        })

jQuery如何切换ul里面的li位置

4 个答案: