需求是这样的。
单击某个组件，如何可以根据该组件，取到该组件下一个附件。
由于jquey 相关的next方法,都是取到组件的同一层次下的组件。在例子中，比如text.
由于，组件的类和id 的不确定性，这时候jquery的强大的选择器，也望洋兴叹了。只能借助筛选器了。把所有的组件都查出来，然后根据条件，一个个的筛选。
实现方法如下。
个人感觉自己的代码比较绕，希望有兴趣的朋友，一起讨论。
<!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>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":text:eq(0)").click(function(){
var o = this;
var i =0;
var $next;
var name;
var xxx=$(":text").filter(function(index){
if(o == this){
i=index;
$next =$(":text:eq("+i+1+")");
name= $next.attr("name");
return false;
}else{
var t = $(this).attr("name");
if(t ==name){
return true;
}else{
return false;
}
}
});
alert(xxx.length);
});
});
</script>
</head>
<body>
<table width="200" border="0">
<tr>
<td>
<input name="text1" type="text" value="1" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<input name="text2" type="text" value="2" />
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<input name="text3" type="text" value="3" />
</td>
<td> </td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":text:eq(0)").click(function(){
var o = this;
var i =0;
var $next;
var name;
var xxx=$(":text").filter(function(index){
if(o == this){
i=index;
$next =$(":text:eq("+i+1+")");
name= $next.attr("name");
return false;
}else{
var t = $(this).attr("name");
if(t ==name){
return true;
}else{
return false;
}
}
});
alert(xxx.length);
});
});
</script>
</head>
<body>
<table width="200" border="0">
<tr>
<td>
<input name="text1" type="text" value="1" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<input name="text2" type="text" value="2" />
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<input name="text3" type="text" value="3" />
</td>
<td> </td>
</tr>
</table>
</body>
</html>
本文转自 randy_shandong 51CTO博客，原文链接：http://blog.51cto.com/dba10g/282272，如需转载请自行联系原作者