jquery怎样取得element下的某个element?div class="info"是隐藏了,想当mouseover li时,把info显然出来,但怎样mouseover时取得info的element?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.list{overflow:auto; width:550px; border:1px solid #0099FF;}
.list ul li{list-style:none;float:left; width:100px; height:100px; margin-bottom:10px; margin-right:5px; border:1px solid #CCCCCC; padding:5px;}
.list ul li .info{display:none;}</style>
<script type="text/javascript">
$(document).ready(function(){
$('.list li').mouseover(function(){
alert($(this).html());
//???
});
});
</script>
</head><body><div class="list">
<ul>
<li>
<div class="name">Name 1</div>
<div class="info">Info 1</div>
</li>
<li>
<div class="name">Name 2</div>
<div class="info">Info 2</div>
</li>
<li>
<div class="name">Name 3</div>
<div class="info">Info 3</div>
</li>
<li>
<div class="name">Name 4</div>
<div class="info">Info 5</div>
</li>
<li>
<div class="name">Name 5</div>
<div class="info">Info 5</div>
</li>
</ul>
</div>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.list{overflow:auto; width:550px; border:1px solid #0099FF;}
.list ul li{list-style:none;float:left; width:100px; height:100px; margin-bottom:10px; margin-right:5px; border:1px solid #CCCCCC; padding:5px;}
.list ul li .info{display:none;}</style>
<script type="text/javascript">
$(document).ready(function(){
$('.list li').mouseover(function(){
alert($(this).html());
//???
});
});
</script>
</head><body><div class="list">
<ul>
<li>
<div class="name">Name 1</div>
<div class="info">Info 1</div>
</li>
<li>
<div class="name">Name 2</div>
<div class="info">Info 2</div>
</li>
<li>
<div class="name">Name 3</div>
<div class="info">Info 3</div>
</li>
<li>
<div class="name">Name 4</div>
<div class="info">Info 5</div>
</li>
<li>
<div class="name">Name 5</div>
<div class="info">Info 5</div>
</li>
</ul>
</div>
</body>
</html>
解决方案 »
- 跪求blur.js这个jQuery插件
- Extjs4.0里如何实现单击展开和收起tree的节点
- 控制div显示与隐藏的问题
- 在<s:iterator>中,将${good.uploadTime},转换成如“2013-04-23”形式,如何做啊?
- 页面刷新,但下拉框内容不变
- 有什么办法可以给htc文件中的函数传参数吗?(请高手指点)
- 来点有意义的东西,谁能用javascript 实现 神经网络 算法 顶着有分
- 网页中,用js或html怎么打开文件夹?
- window.popup来实现菜单的实例谁有?急
- 关于地址转向问题
- chrome中,设置table的某行行高,如:document.getElementbyId("tr3").style.height="50px",为什么无效?
- js 如何获取网页源码
<input class="test2" />
</div>....
var parentObj = $("div#test");var inputOfDiv = $("input.test2", parentObj);
$(document).ready(function(){
$('.list li').mouseover(function(){
//alert($(this).offset().top);
//alert($(this).position().top+$(this).height());//125
$('div.info', $(this)).css({
'position':'absolute',
'top':$(this).position().top+$(this).height()+11+'px',//135 is corrent
'left':$(this).position().left+'px',
'border':'1px solid #CCCCCC'
}).show();
});
)};设定info的position在li下面
原来要用innerHeight()才对