Question

jquery 怎样获取某元素以下的第n个元素

如：
<div class="EnterpriseTemplate">
<div class="TemplateTt">
<div class="EnterpriseLeft">
<div class="TemplateLeft" style="display: block;">
<div class="TemplateLeftTt">
<div class="TemplateLeftCont">
<ul>
<li class="">
<li class="">
<li class="TempSpan">
</ul>
</div></div>
<div class="TemplateRight" style="display: none;">
<div class="TemplateRight" style="display: none;">
<div class="TemplateRight" style="display: none;">
</div>在上面的结构中，如果通过<li class="TempSpan">获取他的父级的父级的父级，也就是<div class="TemplateLeft" style="display: block;">往下数第三个<div class="TemplateRight" style="display: none;">元素

Answer 1

可以用jquery选择器的:eq选择器或者jquery遍历的eq()方法，下面带那给出ul下第4个li的内容

$("ul li:eq(3)")  // 元素的index位置工0开始计数，所以这里的3实际为第4个元素
$("ul").find("li").eq(3)

示例代码如下

1. 创建Html元素

   <div class="box">
   	<span>点击按钮获取指定位置元素：</span><br>
   	<div class="content">
   		<li>梨子</li>
   		<li>李子</li>
   		<li>栗子</li>
   		<li>荔枝</li>
   	</div>		
   	第&nbsp;<input type="text" name="num">&nbsp;个li元素<input type="button" value="确定">
   </div>

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
   div.box span{color:#999;font-style:italic;}
   div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
   li{margin:10px 0;}
   input[type='text']{width:50px;padding:5px 10px;border:1px solid #ff9966;}
   input[type='button']{height:30px;margin:10px;padding:5px 10px;}

3. 编写jquery代码

   $(function(){
   	$("input:button").click(function() {
   		num = $("input:text[name='num']").val()-1;  // index从0开始计算
   		str = $("div.content").find("li").eq(num).text(); // eq()遍历方法
   		// 或者使用如下:eq()选择器的方法，单数之一要拼接字符串
   		// str = $("div.content li:eq("+num+")").text()   // :eq()选择器
   		alert(str);
   	})
   })

4. 观察效果

   

Answer 2

$('.TempSpan').parents('.TemplateLeft').find('.TemplateRight').eq(2);