Question

查看以下html，我没有明确地用表格标签包裹：

HTML：

<tr class="item1">
    <td>
        <select name="postArrayFormato[]" id="test">
             <option value="frascoG">Frasco 370g</option>
         <option value="frascoC">Frasco 220g</option>
         <option value="sachet">Sachet 200g</option>
         <option value="doypack">Doy/Pack 250g</option>
        </select>
    </td>
    <td><input type="text" name="test" value="20" readonly/></td>
</tr>

jquery的：

由于某些原因，这对于上面的html工作正常，这对我来说很奇怪。

js小提琴：

http://jsfiddle.net/gM2vX/5/

$(function(){
    $("body").on("change","#test",function(){
        $(this).next().val("99");
    });
});

当我在tr周围添加表标签时，上面的jquery不起作用，这很明显，需要以下代码：

js小提琴： http://jsfiddle.net/gM2vX/4/

$(function(){
    $("body").on("change","#test",function(){
        $(this).parent().next().find("input").val("99");
    });
});

但我的问题是为什么它在第一种情况下工作正常？这不是问题，只需要清晰。

Answer 1

检查页面的html。由于您不能拥有表格中没有的tr，因此浏览器会删除tr和td元素，从而“修复”它，因此， select和input成为兄弟姐妹：

<body style=""> 
    <select name="postArrayFormato[]" id="test">
        <option value="frascoG">Frasco 370g</option>
        <option value="frascoC">Frasco 220g</option>
        <option value="sachet">Sachet 200g</option>
        <option value="doypack">Doy/Pack 250g</option>
    </select>
    <input type="text" name="test" value="20" readonly="">
</body>

tr周围缺少表标签的奇怪jQuery功能

1 个答案: