jQuery中的append方法误区！

先上测试代码,我想做这样一个效果，鼠标移入自动在div上添加删除字样，鼠标移出后消失

 

<div id="1">Item1</div>
<div id="2">Item2</div>
<div id="3">Item3</div> 

<script type="text/javascript">
jQuery(function() {
	var ele = jQuery("div");
	ele.hover(function(){
		jQuery(this).append("<span class='s'>删除</span>");
	},function(){
		jQuery(this).remove(".s");
	});
});
</script>

 

这样的写法并不能达到效果，主要是jQuery(this).remove(".s");执行后没有效果，查看了光放的API，这样写到：

append(content)

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

参数content String, Element, jQuery

 

并没有太大收获，想了想可能是没有将新的代码加入dom中，于是把append中的参数由String换成jQuery对象，操作如下：

1.在HTML中添加<span class='s'>删除</span>

2.将jQuery(this).append("<span class='s'>删除</span>");改成jQuery(this).append(jQuery(".s"));

3.测试成功！

评论

12 楼 amwjx 2011-03-26  

wang663727 写道

jerryqiu007 写道

wjyuian 写道

可能我误解了楼主想要表达的重点了，，

那为什么用我后面的方法删除就可以了呢？
.将jQuery(this).append("<span class='s'>删除</span>");改成jQuery(this).append(jQuery(".s"));

因为只有jQuery(this).append(jQuery(".s")); 起作用了
jquery的append参数如果是一个jq对象就会删除原始对象，追加到新位置，你改了之后的代码jQuery(this).remove(".s"); 并没有任何效果

楼上正解

jQuery('div').remove(‘.s’);
相当于：
jQuery('div').filter('.s').remove()

下面的起作用，和jQuery(this).remove(".s");没有一点关系
jQuery(this).append(jQuery(".s"));
相当于：
jQuery(".s").remove().appendTo($(this));

11 楼 qjtttt 2011-03-18  

jerryqiu007 写道

wjyuian 写道

可能我误解了楼主想要表达的重点了，，

那为什么用我后面的方法删除就可以了呢？
.将jQuery(this).append("<span class='s'>删除</span>");改成jQuery(this).append(jQuery(".s"));

$(this).append("<span class='s'>删除</span>");
$(this).append($(".s"));
自己下断点看看 $(".s") 是什么
$(".s") 意思是说的 document.getElementsByClassName("s");
JS执行顺序的问题，先执行的$(".s") 然后传递给$(this).append
这时候是告诉程序，我要往这个div里面加入页面上所有clsss为s的元素作为子元素

10 楼 int08h 2011-03-18  

remove函数里的selector是指“在当前jQuery选择出来的元素之中符合该选择器的元素将被移除”
你的$(this)是一个div，.remove('.s')是在[div]这个数组里找到符合.s这个选择器的，当然一个都找不到，所以没有移除……
问题的根本出在remove，你却去修改append……

9 楼 wang663727 2011-03-18  

jerryqiu007 写道

wjyuian 写道

可能我误解了楼主想要表达的重点了，，

那为什么用我后面的方法删除就可以了呢？
.将jQuery(this).append("<span class='s'>删除</span>");改成jQuery(this).append(jQuery(".s"));

因为只有jQuery(this).append(jQuery(".s")); 起作用了
jquery的append参数如果是一个jq对象就会删除原始对象，追加到新位置，你改了之后的代码jQuery(this).remove(".s"); 并没有任何效果

8 楼 yiyi_2 2011-03-11  

等待楼下解惑!!!

7 楼 jerryqiu007 2011-03-02  

wjyuian 写道

可能我误解了楼主想要表达的重点了，，

那为什么用我后面的方法删除就可以了呢？
.将jQuery(this).append("<span class='s'>删除</span>");改成jQuery(this).append(jQuery(".s"));

6 楼 wjyuian 2011-03-02  

可能我误解了楼主想要表达的重点了，，

5 楼 wjyuian 2011-03-02  

不过楼主没理解
jQuery('div').remove(s);这句话的意思，以及remove参数是字符串时候的意思

jQuery('div').remove()注定被删除的一定是个div，，remove的参数是帮助删选的
所以jQuery('div').remove(‘.s’);表示删除class为s的div对象

而楼主jQuery(this).remove(".s"); 是删除class为s的div，所以没有删除（因为this就是div，，如果给3个div加上class='s'，则会连同div被删掉）

所以沙发的那种做法可以达到楼主想要的效果

4 楼 wjyuian 2011-03-02  

zuiyanwangyue 写道

interjc 写道

不是这个问题，是你mouseout的时候写的语法有问题

jQuery(this).remove(".s"); 

这个时候意思是去除字符串 .s ，应该是

jQuery(this).find(".s").remove(); 

正解

jQuery(this).remove(".s"); 这句话没问题，，remove的参数也可以是字符串，代表选择器。。

3 楼 zuiyanwangyue 2011-03-02  

interjc 写道

不是这个问题，是你mouseout的时候写的语法有问题

jQuery(this).remove(".s"); 

这个时候意思是去除字符串 .s ，应该是

jQuery(this).find(".s").remove(); 

正解

2 楼 elvishehai 2011-03-02  

呵呵, 都是高手 ,我对这个不是很了解了,

1 楼 interjc 2011-02-26  

不是这个问题，是你mouseout的时候写的语法有问题

jQuery(this).remove(".s"); 

这个时候意思是去除字符串 .s ，应该是

jQuery(this).find(".s").remove();