jquery 表单元素查找

l       问题

在一个表单中，我需要把同一行中的任意两个元素的值累加，并把累加的值赋值到第三个元素。

 

l       技术

jquery 中的parent([expr]) , parents([expr]),

find([expr]),prev(),next()

l       分析

看到这个问题，就会想到，首先要得要被赋值元素的位置，以它的坐标为起点，查找另外两个元素，因为这三个元素在同一行，所以我们可以用jquery中的parent()或parents()这两个方法，得到它的父元素：

parent():取得一个包含着所有匹配元素的唯一父元素的元素集合。

Parents():取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

得到父元素后，在父元素中用find()方法，得到想要的元素进行运算即可。

 

 

l      代码

jquery 代码：

方法1：

$("input[name='name4']").each(function(){

  $(this).val(parseInt($(this).parent("td").prev().find("input").val())+parseInt($(this).parent("td").prev().prev().find("input").val())); 

}); //此方法，当表单中的元素发生位移时，就会出现问题。

 

方法2：

$("input[name='name4']").each(function(){

$(this).val(parseInt($(this).parents("tr").find("input[name='name3']").val())+parseInt($(this).parents("tr").find("input[name='name2']").val()));

}); //此方法，当表单中的元素发生位移时，程序可正常运行。

 

页面代码：

<form>

    <table>

       <tr>

           <td><input type="text" name="name1" value="2"></td>

           <td><input type="text" name="name2" value="33"></td>

           <td><input type="text" name="name3" value="1"></td>

           <td><input type="text" name="name4" value=""></td>

           <td><span>123</span></td>

       </tr>

       <tr>

           <td><input type="text" name="name1" value="2"></td>

           <td><input type="text" name="name2" value="33"></td>

           <td><input type="text" name="name3" value="5"></td>

           <td><input type="text" name="name4" value=""></td>

           <td><span>123</span></td>

       </tr>

    </table>

   </form> 

l       总结

这个问题主要体现了parent([expr]) , parents([expr])的不同。后者会使程序的可靠性更高，所以程序中应尽量使用后者。