0

This is in reference of the question "reorder list elements - jQuery?" already asked here

Now I want to move a little further. What I am wanting to do, I am just wanting to build up a Comparison Product items for an ecommerce.

So, here I find the reordering a list item. But I want to add two button in each list item named "Left" and "Right", though here I have shown only one i.e "Right". On clicking the the "Right" button the "data-sortby" value will update to +1 and the list will move right i.e. in the next position and the next positioned list item will reorder to it's previous position. In short side by side movement of li items.

So the HTML is below:[just added the buttons]

<ul id="ulName">
<li data-sortby="1">three <a href="javascript:;" class="rGth" >Right</a></li>
<li data-sortby="2">one<a href="javascript:;" class="rGth" >Right</a> </li>
<li data-sortby="3">two<a href="javascript:;" class="rGth" >Right</a> </li>
<li data-sortby="4">four<a href="javascript:;" class="rGth" >Right</a> </li>

And the script is:

$(document).ready(function() {

var ul = $('ul#ulName'),
    li = ul.children('li');


    li.detach().sort(function(a,b) {
        return $(a).data('sortby') - $(b).data('sortby');


    });


    ul.append(li);

   $('.rGth').each(function(){
          var thisli = $(this);
          var parent = thisli.parent('li');
          var right =  parent.data('sortby') + 1;
          var left = parent.data('sortby') - 1;
          thisli.click(function(){
          //alert(parent.data('sortby')+1);
         alert(right);
         alert(left);
          parent.data('sortby', right);
         parent.next().data('sortby',left);

        });
    });

});

But what I find that the "data-" attribute is not updating. Can anyone please help me what I am going wrong?

I have edited my code. It is giving an alert of the data attribute values but what I see it is not changing. I know I am doing a silly mess. Can anyone please help? Here is the Fiddle

Community
  • 1
  • 1
amitabhaghosh197
  • 61
  • 3
  • 16
  • Duplicate `id="rGth"` attributes at `button` elements ?, within first two `li` elements ? What is expected result ? – guest271314 Apr 10 '15 at 03:08
  • Seems like jQuery selector cannot get those elements under the **li element** – Alvin Magalona Apr 10 '15 at 03:09
  • Thanks Alvin. I have edited my fiddle. I can retrieve the data value but what I see that my data attribute is not changing the value. I am still doing a silly mess. Can you please help me? – amitabhaghosh197 Apr 10 '15 at 18:06

1 Answers1

0

I finally changed my code and achieved the result which I was searching for. This is the final code:

$('.down').click(function(){
            var cur = $(this).parent(),
                next= $(this).parent().next();


                if(next.length > 0 )    {
                                 var moveDown = (cur.offset().left + cur.outerWidth()) - (next.offset().left + next.outerWidth()),
                     moveUp = (next.offset().left + next.outerWidth()) - (cur.offset().left + cur.outerWidth());

                        cur.css('position', 'relative');
                        cur.animate({'left':-moveDown});

                        next.css('position', 'relative');
                        next.animate({'left':-moveUp},function(){
                                cur.detach().insertAfter(next);
                                next.detach().insertBefore(cur);

                             cur.css({'position': 'static', 'top': 0});
                             next.css({'position': 'static', 'top': 0}); 
                        });


                }
                        //cur.detach().insertAfter(next);
                        //next.detach().insertBefore(cur);



        });

        $('.up').click(function(){
            var cur = $(this).parent(),
                prev= $(this).parent().prev();


            if(prev.length > 0) {
                            var moveUp = (cur.offset().left + cur.outerWidth()) - (prev.offset().left + prev.outerWidth()),
                moveDown = (prev.offset().left + prev.outerWidth()) - (cur.offset().left + cur.outerWidth());
                        cur.css('position', 'relative');
                        cur.animate({'left':moveDown});

                        prev.css('position', 'relative');
                        prev.animate({'left':moveUp},function(){
                                cur.detach().insertBefore(prev);
                                prev.detach().insertAfter(cur);

                             cur.css({'position': 'relative', 'left': 0});
                             prev.css({'position': 'relative', 'left': 0}); 
                        });
                }
        });
amitabhaghosh197
  • 61
  • 3
  • 16