JQuery内容从左边框移到右边框

最近感觉学习挺紧的。JQuery没有学几天就又开始学习AngularJS了。学习的时候都是看着老师用着很简单,自己写的时候就觉得不太会用。但是学习AngularJS的时候有很多问题,我觉得不管是学习JQuery还是AngularJS都需要多练习。

之前做的一个有一个框里面有名字然后选中就移到右边去,也可以右边移到左边。之前看见很多网站上都有这种效果。现在我来简单讲解一下。

<body>
<div class="all">
    <div>
        <select name="left" id="left" class="left" multiple="multiple" size="10"   >
            <option value="1">关羽</option>
            <option value="2">张飞</option>
            <option value="3">刘备</option>
            <option value="4">曹操</option>
            <option value="5">诸葛亮</option>
            <option value="6">周瑜</option>
            <option value="7">黄盖</option>
        </select>
    </div>
    <div>
        <button onclick="moveRight()" >&gt;</button><br>
        <button onclick="moveAllRight()">&gt;&gt;</button><br>
        <button onclick="moveLeft()">&lt;</button><br>
        <button onclick="moveAllLeft()" >&lt;&lt;</button><br>
    </div>
    <div>
        <div>
            <select name="left" id="right" class="right" multiple="multiple" size="10"   >
            </select>
        </div>
        <div>
            <button onclick="moveUp()">↑</button><br>
            <button onclick="moveDown()">↓</button>
        </div>
    </div>
</div>
</body>

如上,body里面写两个select,multiple="multiple" size="10"这样写框就会高一点,能看见下面所有的option.

页面效果图如下:

<script src="js/jquery-1.9.1.min.js"></script>

jquery文件千万不要忘记导入。

下面来加入具体的js

全部移入右边框:

    function moveAllRight(){
        $(".left>option").appendTo(".right");
}

定义一个函数名为movvAllRight的函数。我们用appenTo来操作。

AppendTo概述:

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

效果图如下:

同理:右边全部移入左边也是这样写的,代码如下:

function moveAllLeft(){
        $(".right>option").appendTo(".left");
}

效果图如下:

当然,上面的还可以用append来做

Append概述:向每个匹配的元素内部追加内容。

用append上面就可以写成如下代码:

function moveAllRight(){
        $(".right").append (".left>option");
}

function moveAllLeft(){
        $(".left").append(".right>option");
    }

下面我们接着讲选中左边框中的一部分然后移到右边框

  function moveRight(){
        $(".left>option:selected").appendTo(".right");
        $("option:selected").prop("selected", false);
}

Selected:匹配所有选中的option元素

$(".left>option:selected")就表示在class为left中的所有选中的option。

$("option:selected").prop("selected", false)就是让选中的移过去之后状态从选中变为没选中。

效果图如下:

同理:选中右边框中的一部分然后移到左边框

 function moveLeft(){
        $(".right>option:selected").appendTo(".left");
        $("option:selected").prop("selected", false);
    }

效果图如下:

选中其中的一部分然后向上移:

function moveUp(){
        $("option:selected:first").prev().before($("option:selected"));
    }

我们要用到prev

Prev概述:取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。

before概述:在每个匹配的元素之前插入内容

first概述:获取匹配的第一个元素。如果不要用first的话如果选中的不是一个向上移的过程中会不断的增加。而且只是把选中的中间没有选中的移到

下面,但是选中的没有继续往上移。

效果图:

同理向下移也是一样的:

function moveDown(){
        $("option:selected:last").next().after($("option:selected"));
    }

Next概述:取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

After概述:在每个匹配的元素之后插入内容。

Last概述:获取最后个元素。

效果图:

时间: 2024-10-06 01:13:17

JQuery内容从左边框移到右边框的相关文章

devexpress中gridcontrol头部添加垂直线(右边框)

winform开发,用devexpress中的gridcontrol控件,头部默认是3D样式,当客户希望像内容一样扁平化显示且需要添加垂直线(右边框)时恶梦开始了..经过一阵摸索发现可以这样解决: 1.设置GridControl的GridView控件的PaintStyleName属性为Web 2.为GridControl的GridView控件添加CustomDrawColumnHeader事件,参考代码如下: private void gridView1_CustomDrawColumnHead

程序员生存定律--管理向左,技术向右

程序员生存定律这系列的目录在这里:程序员生存定律--目录 喜欢从头瞄的,可以移步. ------------------------------------------------------------------------------- 一个程序员在考虑增值时无法回避的一个根本问题是到底是做技术还是做管理.当然也有些职位会介于两者之间比如架构师,但我们暂时不去做细分,而是用简单的二分法. 这种基本方向上的选择对后续很多细节上的取舍有关键影响,所以在考虑其他之前,最好先回答一下这个问题.这就

左值引用和右值引用

1.左值和右值的概念 左值是可以放在赋值号左边可以被赋值的值:左值必须要在内存中有实体:         右值当在赋值号右边取出值赋给其他变量的值:右值可以在内存也可以在CPU寄存器.         一个对象被用作右值时,使用的是它的内容(值),被当作左值时,使用的是它的地址. 2.引用 引用是C++语法做的优化,引用的本质还是靠指针来实现的.引用相当于变量的别名. 引用可以改变指针的指向,还可以改变指针所指向的值. 引用的基本规则: 声明引用的时候必须初始化,且一旦绑定,不可把引用绑定到其他

左值、左值引用、右值、右值引用

1.左值和右值的概念 左值是可以放在赋值号左边可以被赋值的值:左值必须要在内存中有实体:         右值当在赋值号右边取出值赋给其他变量的值:右值可以在内存也可以在CPU寄存器.         一个对象被用作右值时,使用的是它的内容(值),被当作左值时,使用的是它的地址. 2.引用 引用是C++语法做的优化,引用的本质还是靠指针来实现的.引用相当于变量的别名. 引用可以改变指针的指向,还可以改变指针所指向的值. 引用的基本规则: 声明引用的时候必须初始化,且一旦绑定,不可把引用绑定到其他

C++ 11 左值,右值,左值引用,右值引用,std::move, std::foward

这篇文章要介绍的内容和标题一致,关于C++ 11中的这几个特性网上介绍的文章很多,看了一些之后想把几个比较关键的点总结记录一下,文章比较长.给出了很多代码示例,都是编译运行测试过的,希望能用这些帮助理解C++ 11中这些比较重要的特性. 关于左值和右值的定义 左值和右值在C中就存在,不过存在感不高,在C++尤其是C++11中这两个概念比较重要,左值就是有名字的变量(对象),可以被赋值,可以在多条语句中使用,而右值呢,就是临时变量(对象),没有名字,只能在一条语句中出现,不能被赋值. 在 C++1

span文字在左背景图片在右

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">span {     background-image:url(http://a3.qpic.cn/psb?/V11OXL2y3vDNOK/BLjgWL6kfs*3sZIUVjubWPHQWxn

Flexslider - 响应式的 jQuery 内容滚动插件

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发中试试. 温馨提示:响应式效果需要再 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中才支持. 效果演示     插件下载 使用示例: <div class="flexslider"> <ul class="slides"&g

20 个非常棒的jQuery内容滑动插件

WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑,是很不错的图像滑块设计工具. Nivo Slider Nivo Slider是一款出色的jQuery幻灯片插件,支持多种切换效果,可定制性强. Simple Multi-Item Slider一款基于jQuery插件的多项目滚动条,Simple Multi-Item Slider Category slider with

荐书一本-----《天才在左,疯子在右》

近来无意在网上找到一本书,名字叫<天才在左.疯子在右>,是一本精神病人访谈手记,花了一个礼拜的时候读完,感觉非常不错,向CSDN的朋友推荐一下. 在读之前你需要有心理准备,它很可能会颠覆你的世界观,撼动你的价值观,改变你的人生观.以前在网上流行一句话,叫2B青年欢乐多.精神美人思维广,大多数人都把注意力集中在前一句,是调侃不靠谱青年的一种笑谈,读完这本书后,发现后半句其实非常精辟.有一部分精神病人,他们的逻辑非常严密,思考的角度和维度远超常人,他们所关注的东西的层次更是庸庸碌碌的众生所无法企及