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'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 に答える
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 に答える
0

あなたのjsコードは機能しています。移動してhtmlコードを検証するだけです

<table id="positions">

と

</table>

divに。

于 2012-12-21T08:08:58.093 に答える
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 に答える