Question

所有。我有这样的html布局：

<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/

   <div class="form-group col-lg-1">
         <input type="button" class="btn btn-default" onclick="updateLine()" value="Update">
   </div> 
</div>

我想获取div的ID，在本例中为1。

这就是我所做的。

function updateLine() {
  alert(this.parent().parent().attr("id"));
}

然而，它失败了，然后我检查

alert(this);

它将窗口对象返回给我。

所以问题是，我怎样才能得到id的值，即1。

感谢。

Answer 1

您需要将this传递给函数，如下所示

<input type="button" class="btn btn-default" onclick="updateLine(this)" value="Update">

function updateLine(obj) {
 alert(obj);
 $(obj).closest('.row').attr('id'); // will return the id, note that numeric values like 1 are invalid
}

Answer 2

如果您想要内联事件处理程序，则需要传递this：

onclick="updateLine(this)"

然后在js：

function updateLine(obj) {
    alert($(obj).closest('.row').attr("id"));
}

但是，我建议尽可能删除内联处理程序并使用jQuery进行绑定：

$('button').click(function() {
    alert($(this).closest('.row').attr("id"));
});

Answer 3

你正在尝试做的是非常糟糕的做法。它永远不会奏效。

首先，你不应该使用内联javascript。

其次，你应该使用真正的jQuery代码。

下面你可以看到一个有效的例子。

<div class="row" id="1">
    <div class="form-group col-lg-1">
        <input type="button" class="btn btn-default" value="Update" id="someID" />
    </div>
</div>

你的jQuery代码应该是：

$(function () {

    $('#someID').click(function () {
        alert($(this).parents('div:eq(1)').prop('id'));
    });

});

以下是一个工作示例：http://jsfiddle.net/avramcosmin/Z9snq/

Answer 4

您无需将此传递给该函数。在事件处理程序中this是单击的元素。但是，要在其上使用.parent（）等，您需要该元素的jQuery对象$(this)

另外，我强烈建议使用.closest而不是.parent（）。parent（）。像

这样的东西

$(this).closest('div.row').attr('id')

当您进行小的布局更改时，不太可能中断...

关于使用jQuery事件而不是内联javascript的评论也是很好的建议。

示例：

<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/

   <div class="form-group col-lg-1">
         <input type="button" class="btn btn-default" value="Update">
   </div> 
</div>

<script type="text/javascript">
    $(function(){
        function updateLine(event){
            alert( $(this).closest('.row').attr('id') );
        }

        // If you have other buttons add a class like 'btn-update' and use that instead
        $('body').on('click', '.btn-default', updateLine);

    });
</script>

Answer 5

有点晚了，但是对我有用：

$(document).on('click', '.id', function(event) {
    const elem = $(this);
})

Jquery单击函数，使用此但返回我的窗口对象

5 个答案: