CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lvekua
lvekua

Reputation: 196

jQuery how to switch li position inside of ul

I have an unordered list with bunch of li's in it.

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

and what I'd like to achieve is, if I click on <li>item 2</li> it would switch index with <li>item 1</li> another words item 2 becomes item 1 and if I click new item 2 which was previously item 1, it has to switch again and keep looping continuously as long as item 2 is clicked. Same should be true for 3,4 and 5,6.

Upvotes: 0

Views: 3999

Answers (4)

遁地龙卷风
遁地龙卷风

Reputation: 40

lol is id of ul

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

        })

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Solution using insertBefore() and 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)
});

If partner not available jQuery selector at the end will fail quietly

DEMO

Upvotes: 1

Birrel
Birrel

Reputation: 4834

If you want the switching to occur ONLY between paired items (i.e. 1-2, 3-4, 5-6 and so on)

Working fiddle 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) {}
});

What this does is:

  1. Get the index and contents of the clicked item
  2. Determine if clicked is odd or even
  3. Assign the appropriate partner element
  4. Swap contents (if partner element exists)

Follow the same pattern to switch whichever items you want

Upvotes: 3

Sergio Alen
Sergio Alen

Reputation: 724

Your description isn't very clear, and like charlietfl said you should provide any code where you attempted to do this not just the html as you tagged this as javascript, anyways you could try something like this:

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

Upvotes: 1

Related Questions