Question

<div id='a_div'>
    <ul>
        <li><button type='button' onclick='a_function()'>Button</button>
    </ul>
</div>

在上面设置的示例中，将div的id传递给a_function的最佳方法是什么有没有比做onclick='a_function(this.parentNode.parentNode.parentNode.id)'

更好的方法

Answer 1

如果您使用的是JQuery，那么.closest()可以解决您的问题。

Answer 2

自投票结束后添加jsFiddle演示表示我的答案不正确。

如果你想从内联处理程序中取出它，你可以只传递this，然后遍历方法......

onclick='a_function(this)'

function a_function(el) {
    var id = el.parentNode.parentNode.parentNode.id
}

DEMO： http://jsfiddle.net/CUyZ4/

或者，如果您不想重复parentNode，请创建一个函数...

function up(el, n) {
    while(n-- && (el = el.parentNode)) ;
    return el;
}

function a_function(el) {
    var id = up(el, 3).id;
}

DEMO： http://jsfiddle.net/CUyZ4/1/

或直接使用它...

onclick='a_function(up(this, 3).id)'

DEMO： http://jsfiddle.net/CUyZ4/2/

Answer 3

现在OP说jQuery可以接受的最好方法是使用parents函数

function a_function(){
    var self = $(this), 
        parentDiv = self.parents('div');
}

这将为您提供在遍历DOM链时遇到的第一个div。当然，如果你想让它更具体一些，你可以为所有这些div指定一个特定的类，然后将它们定位为self.parents('div.someClass')

小提琴添加

Click to check working fiddle

Answer 4

您可以使用简单的“upTo”函数来获取具有特定tagName的第一个祖先。如果找不到合适的元素，则返回undefined：

function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  var el;
  do {
    el = el.parentNode;
    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  } while (el.parentNode)
}

但是如果你正在使用jQuery，毫无疑问你更喜欢它。

定位父div的最佳方法 - javascript

4 个答案:

小提琴添加