jQuery：从回调中选择父属性答案

【问题标题】：jQuery: selecting a parent attribute from a callbackjQuery：从回调中选择父属性
【发布时间】：2010-10-05 23:33:15
【问题描述】：

鉴于此 html 代码：

<td><img class='del' id='4' src='images/delete.gif'></td>

我无法理解如何完成以下代码：

$(document).ready(
    function(){ 
        setup();                            
    }
);

function setup(){
    $("#deleteForm").hide();
    $("img.del").bind('click', formDisplay);
}   

function formDisplay(){
   $("#deleteForm").show();
}

这里我需要将图像元素的id 属性的值传递给回调，但我有一些问题要理解this 或$('this') 在jQuery 中的工作方式

更好的是，我想要这样的 html 代码：

<tr id='4'>
   <td>...</td><td>...</td><td><img class='del' src='images/delete.gif'></td>
</tr>

能够从回调中在中获取<tr>元素的每个子元素的值，该元素由其id标识。

有什么建议吗？

非常感谢

【问题讨论】：

您的某些代码没有显示出来。编辑？
抱歉，一开始我笨得要命。忘记引用代码:-(
嗯......这个网站令人难以置信。我只是输入我的问题以获得正确的答案......真遗憾。

标签： javascript jquery dom

【解决方案1】：

只是重新格式化bendewey的答案：

jQuery(function($) {
    $("#deleteForm").hide(); 
    $("img.del").click(function() { 
        $("#deleteForm").show();
        $(this).attr('id');  // this is the image Id
    })
});

【讨论】：

【解决方案2】：

$(document).ready( function(){ 
    setup(); 
});

function setup() { 
    $("#deleteForm").hide(); 
    $("img.del").bind('click', formDisplay); 
} 

function formDisplay() { 
    $("#deleteForm").show();
    $(this).attr('id');  // this is the image Id
    $(this).closest('tr').attr('id');  // this is the tr Id
}

【讨论】：

【解决方案3】：

这是一个小例子。此方法适用于任何父标签。

如果三个按钮都一一点击输出应该是（请注意console.log()是Firebug函数，如果没有安装Firebug可以用alert代替）：

td
div
身体

请注意最后的结果。在这种情况下，没有表的 TD 不被视为父级。

代码如下：

<body class="body">

<script type="text/javascript">

    $(document).ready(function(){
        setup();
    });

    function setup() {
        $("#deleteForm").hide();
        $("img.del").click(formDisplay);
    }

    function formDisplay() {
        $("#deleteForm").show();
        var p = $(this).parent(); // parent tag
        p.attr('id');  // this is the image id -- what you need
        console.log(p.attr("class")); // show parent element class to show difference
    }

</script>

<table class="table">
<tr class="tr">
<td class="td"><img class='del' id='4' src='images/delete.gif'></td>
</tr>
</table>

<div class="div"><img class='del' id='5' src='images/delete.gif'></div>

<td class="td"><img class='del' id='6' src='images/delete.gif'></td>

<div id="deleteForm">text</div>

</body>

希望这会有所帮助。

【讨论】：

【解决方案4】：

类似这样的东西（为了清楚起见，删除了方法结构）：

$(document).ready(function(){
    $("deleteForm").hide();

    $("img.del").click(function(){
        $("#deleteForm").show();
        $(this).id; // I can't remember if this is cross-platform or not, but you get the idea...
    }
});

【讨论】：

我将你的两个答案完全合并为 1：D
（顺便说一句，我在发布之前没有看到它们，等等）
我认为 $(this).id 不会起作用。未包装的版本肯定可以使用 this.id。
是的，我很愚蠢。显然我的帖子也被编辑了，虽然我不太清楚在哪里。或者为什么。