jquery 取到组件的next组件

时间 2020-05-29

标签 jquery 组件栏目 JQuery 繁體版

原文原文链接

需求是这样的。

单击某个组件，如何能够根据该组件，取到该组件下一个附件。

因为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>