Javascript 更新数据属性时，将列表项从左向右或从右向左移动

这是关于“重新排序列表元素-jQuery？”问题的参考

现在我想再往前走一点。我想做的是，我只是想建立一个比较的电子商务产品项目

因此，这里我找到了重新排序列表项的方法。 但我想在每个列表项中添加两个名为“Left”和“Right”的按钮，尽管这里我只显示了一个按钮，即“Right”。单击“右”按钮，“数据排序”值将更新为+1，列表将向右移动，即在下一个位置，下一个定位的列表项将重新排序到其上一个位置。简言之，li项目并排移动

下面是HTML:[刚刚添加了按钮]

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

但是我发现“data-”属性没有更新。 谁能帮我一下我出了什么问题

我已经编辑了我的代码。它给出了数据属性值的警报，但我看到它没有改变。我知道我做了一件愚蠢的事。有人能帮忙吗？

---

这是我最后更改代码并获得搜索结果的

。这是最终代码：

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

---

在前两个

li

元素中的

button

elements？处复制

id=“rGth”

属性？预期的结果是什么？似乎jQuery选择器无法在li元素下获取这些元素。我已经编辑了小提琴。我可以检索数据值，但我看到我的数据属性没有改变值。我还在胡闹。你能帮帮我吗？

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