Question

我有很多同一个班级的div，我需要找到一种方法在oi按下链接或向下链接时上下移动主题:( !!!

  <div class="Container" id="Con1">
    <div><a>Up</a><a>Down</a></div>
    Some textSome textSome textSome textSome textSome textSome textSome 
textSome textSome textSome textSome textSome textSome textSome textSome textSome text
    </div>

    <div class="Container" id="Con1">
    <div><a>Up</a><a>Down</a></div>
    Some textSome textSome textSome textSome textSome textSome textSome
 textSome textSome textSome textSome textSome textSome textSome textSome textSome text
    </div>

 <div class="Container" id="Con3">
    <div><a>Up</a><a>Down</a></div>
    Some textSome textSome textSome textSome textSome textSome textSome
 textSome textSome textSome textSome textSome textSome textSome textSome textSome text
    </div>

Jquery：有些想法，但对我不好

$(document).ready(function() {
    var selected=0;

    $("#items div").click(function() {
        selected= $(this).index();
    });

     $("#up").click(function(e) {
       e.preventDefault();
    });

     $("#down").click(function(e) {
         e.preventDefault();
    });
});

Answer 1

您需要查询before()和after()

首先是模板：

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

这是如何工作的，分解：

我已将一个班级添加到名为a或up的{{1}}元素中。我还添加了一个运行JavaScript代码down的href。它不返回任何内容，但会导致void元素表现为链接。您需要将所有a更改为此格式。并且评论建议仅使用唯一 ID！
使用jQuery选择器选择所有divs和up类，并附加down（点击）。
在此事件处理程序中，我使用event handler请求源元素。这是指this。 a是其容器a的孙子。 div。因此，我需要致电div > div > a。此函数将上移到DOM树，直到找到具有类名parent('.Container')的第一个父项。
现在，下一个时髦的位会检查旁边是否有元素。通过向下我们寻找当前div之后的兄弟姐妹，我们之前寻找它。如果有一个元素，我们可以继续前进并根据移动将元素定位在它之前或之后。

Answer 2

一个问题是你有多个具有相同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>

的jQuery

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

使用向上和向下链接移动Divs Jquery

2 个答案: