Question

按下按钮后，我想找到离它最近的div。在下面的代码中，当我按下“myButton”按钮时，最近返回id为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>

Answer 1

将div放在table标签内是不合适的。如果你需要id为'innerDiv'的div，试试吧

 $(function () {
        $(".buttons").click(function (e) {
            //alert(e.target.id)
            alert($(e.target).closest("table").find('div').attr("id"))
        });
    });

Answer 2

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

<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/

Answer 3

<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>

Answer 4

您的js代码正常运行，只需移动

即可验证您的HTML代码

<table id="positions">

和

</table>

进入div。

Jquery最近找到div元素

4 个答案: