Javascript 使用上下链接移动div Jquery

我有许多div与同一类，我需要找到一种方法来移动主题上下当我按下向上链接或向下链接：（

---

您需要在（）之前查询

，

和（）之后查询

，

首先是一个模板：

<div class="Container" id="Con1">
    <div><a href="javascript: void(0);" class="up">Up</a><a  href="javascript: void(0);" class="down">Down</a></div>
    Some textSome textSome textSome textSome textSome textSome textSome
    textSome textSome textSome textSome textSome textSome textSome textSome textSome text
</div>

这是如何工作的，一个故障：

我在

a

元素中添加了一个名为

up

或

down

的类。我还添加了一个运行JavaScript代码

void

的href。它不返回任何内容，但会使

a

元素作为链接。您需要将所有

div

更改为此格式。正如注释所建议的那样，只使用rong>唯一的ids

使用jQuery选择器选择所有

向上

和

向下

类，并将

事件处理程序

（单击）附加到其中

在此事件处理程序中，我使用

this

请求源元素。这指的是

a

。

a

是其容器

div

的孙子。

div>div>a

。 因此，我需要调用

parent（'.Container'）

。此函数将沿着DOM树向上运行，直到找到类名为

Container

的第一个父级

现在，下一个时髦的位检查它旁边是否有元素。向下时，我们在当前div之后查找同级，向上时，我们在之前查找同级。如果有元素，我们可以继续移动，并根据移动情况将元素定位在它之前或之后

---

一个问题是您有多个具有相同ID（Con1）的div。此外，您的ID和类名的大小写应该较低。另一个问题是您的锚标记上需要

href

属性

您还需要一个包装器来包含要移动的部分

<div id="wrapper">
   <div class="container" id="con1">
       <div>
          <a href="javascript:void(0); class="up">Up</a>
          <a href="javascript:void(0); class="down">Down</a>
       </div>
   Some textSome textSome textSome textSome textSome textSome textSome 
   </div>

   <div class="container" id="con2">
       <div>
          <a href="javascript:void(0); class="up">Up</a>
          <a href="javascript:void(0); class="down">Down</a>
       </div>
   Some textSome textSome textSome textSome textSome textSome textSome 
   </div>
</div>

---

ID也应该是唯一的。您好，您是否编写了任何实际的jQuery，但它不起作用？@Ynhockey代码是submitted@MohamedSamy我已经完全更新了它。它现在反映了您的编码改进和一步一步的解释。使用它真的很有帮助。

<div class="Container" id="Con1">
    <div><a href="javascript: void(0);" class="up">Up</a><a  href="javascript: void(0);" class="down">Down</a></div>
    Some textSome textSome textSome textSome textSome textSome textSome
    textSome textSome textSome textSome textSome textSome textSome textSome textSome text
</div>

$(".up").click(function(e){
   var parent = $(this).parent(".Container");
   if (parent.prev().length > 0)
   {
        parent.prev().before(parent);
   }
   e.preventDefault();
});

 $(".down").click(function(e){
     var parent = $(this).parent(".Container");
     if (parent.next().length > 0)
     {
          parent.next().after(parent );
     }
     e.preventDefault();
});

<div id="wrapper">
   <div class="container" id="con1">
       <div>
          <a href="javascript:void(0); class="up">Up</a>
          <a href="javascript:void(0); class="down">Down</a>
       </div>
   Some textSome textSome textSome textSome textSome textSome textSome 
   </div>

   <div class="container" id="con2">
       <div>
          <a href="javascript:void(0); class="up">Up</a>
          <a href="javascript:void(0); class="down">Down</a>
       </div>
   Some textSome textSome textSome textSome textSome textSome textSome 
   </div>
</div>

$('#wrapper').on('click','a', function(e) {
     var $this = $(this);
     var $container = $this.closest('.container');
     var count = $('#wrapper').find('.container').length;

     if ($this.hasClass('up')) {
         // check to see if we're on the top level - if we are, do nothing
         if (!$container.index() == 0) {
              $('#wrapper').prepend($container);
         }
     }
     else {  // class id "down"
         if (count != $container.index() - 1) {
              $('#wrapper').append($container);
         }
     }
});