2

按下按钮后，我想找到最接近它的 div。在下面的代码中，当我按下“myButton”按钮时，最近返回 id="outerDiv" 的 div，我有兴趣找到 id="innerDiv" 的 div。

据我了解，两个 div 都是按钮的父母，所以我不太明白我做错了什么。

这是我的代码：

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>
<script>
$(function()
{
   $(".buttons").click(function(e){
    alert(e.target.id)
    alert($(e.target).closest("div").attr("id"))    
    });    
});
</script>
</head>
<body>
<div id="outerDiv">
<table id="positions">
<div id="innerDiv">
<tr>
<th>name</th>
<th>id</th>
<th>button</th>
</tr>
<tr>
<td>omer</td>
<td>123</td>
<td><button id="myButton" class="buttons">Click</button></td>
</tr>
</div>
</table>
</div>
</body>
</html>
4

4 回答 4

1

你可以像这样制作你的结构（尽管你可以根据你的需要制作它）它只是一个演示：

<div id="outerDiv">
<table id="positions">
    <tr>
        <td>
            <div id='innerDiv1'>
                <table>
                    <tr>
                        <th>name</th>
                        <th>id</th>
                        <th>button</th>
                    </tr>
                    <tr>
                        <td>omer</td>
                        <td>123</td>
                        <td><button id='myButton1' class="buttons">Click</button></td>
                    </tr>

                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id='innerDiv2'>
                <table>
                    <tr>
                        <th>name</th>
                        <th>id</th>
                        <th>button</th>
                    </tr>
                    <tr>
                        <td>omer</td>
                        <td>123</td>
                        <td><button id='myButton2' class="buttons">Click</button></td>
                    </tr>

                </table>
            </div>
        </td>
    </tr>
</table>

你可以在这里测试一下：http: //jsfiddle.net/yH4YH/1/

于 2012-12-21T07:39:57.643 回答
1

将 div 放在表格标签内是不合适的。如果您需要 id 为“innerDiv”的 div，请尝试

 $(function () {
        $(".buttons").click(function (e) {
            //alert(e.target.id)
            alert($(e.target).closest("table").find('div').attr("id"))
        });
    });
于 2012-12-21T07:31:33.613 回答
0 
<html>
    <head>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>
        <script>
            $(function()
            {
               $(".buttons").click(function(e){
                alert(e.target.id)
                alert($(e.target).closest("div").attr("id"))    
                });    
            });
        </script>
    </head>
<body>
    <div id="outerDiv">
    </div>
    <div id="innerDiv">
        <table id="positions">
        <tr>
            <th>name</th>
            <th>id</th>
            <th>button</th>
        </tr>
        <tr>
            <td>omer</td>
            <td>123</td>
            <td><button id="myButton" class="buttons">Click</button></td>
        </tr>
        </table>
    </div>
</body>
</html>
于 2012-12-21T07:28:22.257 回答
0

您的 js 代码正在运行，只需通过移动对您的 html 代码进行验证

<table id="positions">

和

</table>

进入div。

于 2012-12-21T08:08:58.093 回答