Jquery如何显示隐藏div下面的span

Question

<div class="div">
<span class="span"></span>
<a href="javascrip:void(0)" class="a">
<img src="pp/pp.jpg" border="0"/>
</a>
</div>

想做.div下面对应的span显示和隐藏
$(document).ready(function(){ //这个就是传说的ready
$(".div").mouseover(function(){ 
$(".span").addClass("spancs");}).mouseout(function(){
$(".span").removeClass("spancs");
})
});

鼠标进入就显示样式鼠标移出就取消样式
样式里面是显示和隐藏。
但我做的时候因为.div是循环输出的有好多。。所以它下面的span也有好多。所以得出来的结果是鼠标移近去的时候页面上所有的span都显示了。郁闷
如果用
$(".div").mouseover(function(){ 
$(this).addClass("overline");}).mouseout(function(){
$(this).removeClass("overline");
})
这样的话就可以。但是我要的是div里面的span啊。拿不到对应的。

Answer 1

借助jquery的两个函数：find()和hide()可以实现这个效果1$("div").find("span").hide();实例演示：点击三个div中的任一个，将隐藏被点击div下的span创建Html元素123456789101112131415<div&nbsp;class="box">&nbsp;&nbsp;&nbsp;&nbsp;<span>点击div后隐藏相应的span：</span>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>我是第一个div下的span</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>我是个p，所以不会被隐藏。</p>&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>我是第二个div下的span</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>我是个p，所以不会被隐藏。</p>&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>我是第三个div下的span</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>我是个p，所以不会被隐藏。</p>&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;</div>设置css样式123div.box{width:300px;padding:20px;margin:20px;border:4px&nbsp;dashed&nbsp;#ccc;}div.box&nbsp;span{color:#999;font-style:italic;}div.content{width:250px;margin:10px&nbsp;0;padding:20px;border:2px&nbsp;solid&nbsp;#ff6666;}编写jquery代码12345$(function(){&nbsp;&nbsp;&nbsp;&nbsp;$(".content").click(function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find("span").hide();&nbsp;&nbsp;&nbsp;&nbsp;});})观察效果初始样式点击第二个div的效果

Answer 2

$(".div").mouseover(function(){$(this).find(".span").addClass("overline");}).mouseout(function(){$(this).find(".span").removeClass("overline");})