jQuery DOM对象引用的子对象

为了创建更干净的代码，我尝试编写事件处理程序函数，这些函数知道从何处调用它们。我不确定我试图做的是不是正确的方法，或者页面组成的表中div的底层嵌套是否导致了问题

下表/js的目标是从image标记的属性中获取数据，并将它们填充到父/祖先表中的输入元素中

表结构：

<table id="formbody">

    <tr><td>
    <table class="form_item_wrapper" id="form_item_1">

        <tr><td><div id="search_results"><img class="event_handler" foo="bar" /></div></td></tr>

    <tr><td>Foo: <input id="event_input" name="foo_input_1"></td></tr>
   </table>

    <table class="form_item_wrapper" id="form_item_1">
        <tr><td>
            <div id="search_results"><img class="event_handler" foo="baz" /></div>
        </td></tr>

     <tr><td>Foo: <input id="event_input" name="foo_input2"></td></tr>
    </table>

     </td></tr>


</table>

我遇到的问题是，当form_包装器正确解析包含单击的图像的表时，Firebug显示foo_输入在Firebug中显示为“emtpy”。无论出于何种原因，我都无法在form_包装器中创建指向子级的变量。理想情况下，这是我想写的代码。。。但是不起作用

$(form_wrapper).children("#event_input").val($(event.target).attr('foo'));

给你：

$('img.event_handler').click(function() {
    $(this).closest('tr').next().find('input.event_input').val($(this).attr('foo'));
});

现场演示：

---

注意：我必须在输入元素中将id属性替换为class属性，因为id在页面上必须是唯一的，并且您有多个输入。

从代码中，我可以看到您将表嵌套在表中。一般来说，我认为您应该只使用表来表示数据表。标签使搜索引擎能够从网页中提取标题、段落和定义。将表用于任何其他目的都会产生误导。千万不要说“从不”，但千万不要嵌套表！代码的结构不是我的设计或决定。。。我只是想在实现一些新功能的同时尽可能少地改变它。事实上，我已经考虑过重新编写大部分结构来解决我的问题，但我担心会花费不必要的时间……你认为我的问题的根源可能是使用多个ID吗？嗨，西姆比我早了一步。“children（）”只查找立即（第一级）元素，对于一个表，它将是TBODY元素等。正如答案所说，将“children”更改为“find”。Regards@Dirty您可以使用多个ID。你可以在你的页面上有你想要的任意多的ID。但是，所有ID都必须是唯一的。不能有两个具有相同值的ID属性。因为你的页面上有多个输入元素，所以给它们一个类而不是ID。今天我学到了$（）儿童（）！=$（）查找（）。你们太棒了，非常感谢。切换这些功能非常有效。如果您有类似于

var-elem=$（'#id'）

，那么以后只需执行

var-xyz=elem.find（'tr'）

，而不是

var-xyz=$（elem）.find（'tr'）

。

$('img.event_handler').click(function() {
    $(this).closest('tr').next().find('input.event_input').val($(this).attr('foo'));
});