定位父 div 的最佳方法 - javascript答案

【问题标题】：best way to target the parent div - javascript定位父 div 的最佳方法 - javascript
【发布时间】：2012-03-22 03:21:12
【问题描述】：

<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)'更好的方法

【问题讨论】：

在纯 JavaScript 中，该方法就可以了。
如果您使用的是 jQuery，只需通过 $('#a_button')。或者传递 div 名称并在 a_function 中使用 document.getElementById。
@Asdfg 我认为关键是事先不知道 id，所以必须找到父级。
如果他不知道父母在哪里，他怎么知道它是3级？
是的，这里的概念是页面上会有许多相同的 div 输出，每个都会有一个唯一的 id 来自动设置，并基于在哪个 div 中单击按钮'd like 其父 div 的 id

标签： javascript jquery html this

【解决方案1】：

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

【讨论】：

对不起，我应该有 tagge jQuery，我实际上使用 .closest 来解决这个问题.... onclick='thisFunction(this)' function thisFunction(element){ var div = $(element).closest ('div'); var id = div[0].id;警报（ID）； }

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用简单的“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，毫无疑问你会更喜欢它。

【讨论】：

【解决方案4】：

添加 jsFiddle 演示，因为否决票表明我的答案不正确。

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

onclick='a_function(this)'

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

演示： 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;
}

演示： http://jsfiddle.net/CUyZ4/1/

或者直接内联使用...

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

演示： http://jsfiddle.net/CUyZ4/2/

【讨论】：

很遗憾，这里的有效和正确答案显然只是因为 没有足够的 jQuery 而被否决。