jquery 在第一个元素之前插入一组元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
    <script type="text/javascript">
        $(function(){
            //仅能执行一次
            $("#3").one("mouseover", function(){
                $("#3,#4,#5").insertBefore("#1");
            });
        });
    </script>
</head>
<body>
<div id="1">1</div>
<div id="2">2</div>
<div id="3" style="background-color:red;">3</div>
<div id="4" style="background-color:green;">4</div>
<div id="5" style="background-color:yellow;">5</div>
<span>
当鼠标滑到id为3的div上时，id为3，4，5的div插入到id为1的div之前。
</span>
</body>
</html>试验过了, 在ie, firefox下都是可以的.

可不可以动态获取后面有几个div,把取得的div一起插入eq(0)之前？

插入点都是可见的第一个div,外面有一层大div包着
<div id="m_body1">
   <div id="1"></div>
   <div id="2"></div>
   <div id="3"></div>
   <div id="4"></div>
   <div id="5"></div>
   <div id="6"></div>
   <div id="7"></div>
   <div id="8"></div>
   <div id="9"></div>
</div>
m_body1有固定的宽度，超出的部分隐藏，鼠标滑在哪个div上就把它之后的div且包含它之内的插入可见的第一个div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
    <script type="text/javascript">
        $(function(){
            //仅能执行一次
            $("#3").one("mouseover", function(){
                $(this).add($(this).nextAll()).insertBefore("#m_body1 div:first");
            });
        });
    </script>
</head>
<body>
<div id="m_body1">
<div id="1">1</div>
<div id="2">2</div>
<div id="3" style="background-color:red;">3</div>
<div id="4" style="background-color:green;">4</div>
<div id="5" style="background-color:yellow;">5</div>
</div>
<span>
当鼠标滑到id为3的div上时，id为3，4，5的div插入到id为1的div之前。
</span>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#m_body1 div").mouseover(function(){
                if($(this).attr("id")=="3"){
                    var div = $(this).nextAll().clone();
                    $(this).nextAll().remove();
                    $(this).parent().prepend(div);
                }
            })
        })
    </script>
</head>
<body>
<div id="m_body1">
  <div id="1">1</div>
  <div id="2">2</div>
  <div id="3">3</div>
  <div id="4">4</div>
  <div id="5">5</div>
  <div id="6">6</div>
  <div id="7">7</div>
  <div id="8">8</div>
  <div id="9">9</div>
</div>
</body>
</html>

总是达不到想要的效果！但谢谢大家哈！
      var mbody1=$('.m_body1');
     var $button = $('.c_list');
    $button.mousedown(function(){
            $(this).mousemove(function(e){
              var index=$(this).index()+1;
  var offset = $(this).offset();
  var x=Math.floor(offset.left/169);
  var n=5-x;
      var movewidth=n*169;

mbody1.animate({marginLeft:movewidth},3000,function(){
// $('.m_body1>.c_list').eq(0).before($(this).nextAll());
// $(this).add($(this).nextAll()).insertBefore("#m_body1 div:first");
var div = $(this).nextAll().clone();
                                                               $(this).nextAll().remove();
                                                               $(this).parent().prepend(div);                                                                 mbody1.css('marginLeft',-169);
});
     });
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
html:c_list的宽度为169
<div id="m_body1">
  <div id="1" class="c_list">1</div>
  <div id="2" class="c_list">2</div>
  <div id="3" class="c_list">3</div>
  <div id="4" class="c_list">4</div>
  <div id="5" class="c_list">5</div>
  <div id="6" class="c_list">6</div>
  <div id="7" class="c_list">>7</div>
  <div id="8" class="c_list">>8</div>
  <div id="9" class="c_list">>9</div>
</div>

想要做成iphone触屏滑动的效果。

我用firebug测试，但是后面的元素没有插入在第一个div前？这个问题弄拉一两天啦！唉！

鼠标监听 + insertBefore()

你说的是这样的效果吧，还不怎么理想，你再改进下呗，别忘了在发上来，哈哈
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#m_body1 div").mouseover(function () {
                if ($(this).attr("id") == "3") {
                    var div = $(this).prevAll().clone();
                    var dd = $(this).prevAll().clone();
                    div.attr("id", "temp");
                    $(this).prevAll().remove();
                    div.insertBefore($(this));
                    dd.insertAfter($("#m_body1 div:last"));
                    $(div).slideUp(2000);
                }
            })
        })
    </script>
    <style type="text/css">
        #m_body1 div
        {
            border: 1px double red;
            width: 90px;
            height: 25px;
            margin: 10px;
        }
        #m_body1
        {
            height: 350px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="m_body1">
        <div id="1">
            1</div>
        <div id="2">
            2</div>
        <div id="3">
            3</div>
        <div id="4">
            4</div>
        <div id="5">
            5</div>
        <div id="6">
            6</div>
        <div id="7">
            7</div>
        <div id="8">
            8</div>
        <div id="9">
            9</div>
        <div id="10">
            10</div>
    </div>
</body>
</html>

楼主, 发一个完整的网页code上来把, 把不用的地方删除.
这样大家好直接按你的意思来

用preall再clone之后元素顺序是倒序的？
      $(document).ready(function () {
            $("#Button1").click(function () {                $("#3").prevAll().clone().appendTo($("#m_body1"));
                $("#3").prevAll().slideUp(2000, function () {
                    $("#3").prevAll().remove();
                });
            })
        })

@charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px;}
.wrap{width:960px; margin:0px auto;}
.main{width:936px;background:url(../img/bg110402.jpg) repeat; padding:9px 10px 48px 14px; height:865px; }
.m_left{ float:left;width:38px; height:865px; cursor:pointer;}
.m_center{float:left;width:826px; margin:2px 0px 0px 15px; overflow:hidden; height:865px; }
.m_body{overflow:hidden;width:826px; _width:100%;}
.m_body1{margin-left:-169px; }
.c_list{float:left;margin-right:19px; width:150px;}
.c_list ul{ margin:0px; padding:0px; list-style:none; }
.c_list ul li{margin:0px; padding:0px; list-style:none; width:150px; height:172px; margin-bottom:1px; *margin-bottom:-3px; position:relative;}
.c_list ul li a img{border:0px;}
.tishi{background:url(../img/tishi110402.gif);width:306px; height:104px;position:absolute; display:none; top:30px;left:130px; z-index:1;}
.tishi2{background:url(../img/tishi110402_02.gif);width:289px; height:88px;position:absolute; display:none; top:30px;left:-271px; z-index:1;}
.m_right{float:right;width:38px; height:865px;cursor:pointer;}

$(document).ready(function(){
var mbody1=$('.m_body1');
var list_num=$('.c_list').length;
var list_body=list_num*150+list_num*19;
mbody1.width(list_body);

$('.m_left').click(function(){
mbody1.animate({marginLeft:-338},1000,function(){
$('.m_body1>.c_list').eq(0).appendTo(mbody1);
mbody1.css('marginLeft',-169);
});
});
$('.m_right').click(function(){
mbody1.animate({marginLeft:0},1000,function(){
$('.m_body1>.c_list').eq(0).before($('.m_body1>.c_list').eq($('.c_list').length-1));
mbody1.css('marginLeft',-169);
});
});

});

调试易

jquery 在第一个元素之前插入一组元素

解决方案 »