jQuery如何在ul中切换li的位置

jQuery how to switch li position inside of ul

本文关键字：li 位置 ul jQuery      更新时间：2023-09-26

我有一个无序列表，里面有一堆li。

<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，它必须再次切换，并保持循环，只要项目2被点击。对于3,4和5,6也是一样

如果您希望在配对项(即1- 2,3 - 4,5 -6等)之间进行切换ONLY

在这里工作 

$('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) {}
});

  1. 获取点击项的索引和内容
  2. 判断点击是奇数还是偶数
  3. 分配合适的伙伴元素
  4. 交换内容(如果伙伴元素存在)

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

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

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

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选择器在结束时将悄悄地失败

演示

lol的id 

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