如何在Jquery中将元素移动到另一个元素

时间:2015-07-06 03:10:28

标签: jquery

您好我想将此元素移动到另一个元素中。样品

       ( SELECT 21 AS rownum, 'code-21' AS code 
         UNION ALL SELECT 22, 'code-22'
         ... 
         UNION ALL SELECT 40, 'code-40'
       ) c

进入这个

<div id="source">
...
</div>

所以我有类似的东西

<div id="destination">
...
</div>

这是我的代码

<div id="destination">
  <div id="me-first"></div>
  <div id="source">...</div>
  <div id="last-here"></div>
</div>

我的问题是它只会在我 - 第一个div之前转移到第一个位置。我怎么把它放在我的第一个div和last-here div的中间?感谢

运行代码后,这是错误的展示位置。

jQuery(document).ready(function (){
        jQuery("#destination")
        .prependTo("#source");
    });

2 个答案:

答案 0 :(得分:1)

所有元素都有ID属性,因此请使用id selector(前缀#)来选择它们,而不是class selector(前缀.)用于选择元素按类名

jQuery(function($) {
  $("#source").prependTo("#destination");
});
div {
  padding: 5px;
  margin-bottom: 5px;
  border: 1px solid black;
  min-height: 10px;
}
#destination {
  border-color: red;
}
#me-first {
  border-color: green;
}
#last-here {
  border-color: blue;
}
#source {
  background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="destination">
  <div id="me-first">
    <div id="source">
      ...
    </div>
    <div id="last-here">
    </div>
  </div>
</div>

答案 1 :(得分:1)

使用.after()

jQuery('#me-first').after(jQuery('#source'));

这会在#source之后将#me-first放在DOM中。