由于平时做项目时,append方法用的较多,所以就形成了一种定势思维,即,无论什么问题都爱用append方法解决。
然而今天遇到的一个新的需求,恰恰在使用append方法时会耗费大量的时间和精力。
先上传一下结构代码:
<ul>
<li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]金牛区</span></label></li>
<li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]S区</span></label></li>
<li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]B区</span></label></li>
<li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]C区</span></label></li>
<li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]D区</span></label></li>
<li> <label><input class="select1" type="checkbox" name="select1"><span>[0510000]E区</span></label></li>
</ul>
<div class="right">
<span id="add"><input type="button" class="btn" value=">"/></span><br />
<span id="add_all"><input type="button" class="btn" value=">>"/></span> <br />
<span id="remove"><input type="button" class="btn" value="<"/></span><br />
<span id="remove_all"><input type="button" class="btn" value="<<"/></span>
</div>
<ul id="select2"></ul>
以下是结构图片
要实现最简单的左右选择切换。
以下是我的脑抽js片段:
$('#add').click(function() {
//获取选中的选项,删除并追加给对方
$('#select1 input:checked').parent().parent().appendTo('#select2');
var len = $("input[name='select1']").length;
//alert(len);
var con="";
var arr =[];
for(var i=0; i<len; i++){
if($("input[name='select1']").eq(i).is(':checked')){
var val = $("input[name='select1']").eq(i).val();
con +="<li><label><input class='select2' type='checkbox' name='select2' value='"+val+"''><span>[0510000]"+val+"</span></label></li>";
arr.push(i);
};
};
for(var j=arr.length-1; j>=0; j--){
var e = arr[j];
$('#select1 li').eq(e).remove();
};
$("#select2").append(con);
});
代码是写完了,逻辑也实现了,但总是感觉自己在写的时候非常的费劲,感觉实现一下小的功能耗费了很多的时间。于是就在网上去查询简便方法。
果然不出所料,appendTo方法算是及时解决了我的燃眉之急啊!
以下来说说他们的区别。
append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。
语法
(content).appendTo(selector)参数描述content必需。规定要插入的内容(可包含HTML标签)。selector必需。规定把内容追加到哪个元素上。区别:
(selector).append(content);
既然有了这个方法,接下来的代码就轻松了:
//移到右边
$('#add').click(function() {
//获取选中的选项,删除并追加给对方
$('#select1 input:checked').parent().parent().appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 checkbox:checked').parent().parent().appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 input[type="checkbox"]').parent().parent().appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 input[type="checkbox"]').parent().parent().appendTo('#select1');
});
看来平时基础知识还是不牢靠啊,得多练习了。