лучший способ нацелить родительский div - javascript

Question

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

в приведенном выше примере, как лучше всего передать id div в a_function Есть ли лучший способ, чем делать onclick='a_function(this.parentNode.parentNode.parentNode.id)'

Answer 1

Если вы используете JQuery, то .closest() может решить вашу проблему.

Answer 2

Вы можете использовать простую функцию «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, несомненно, вы бы предпочли это.

Answer 3

Лучший способ теперь, когда OP говорит, что jQuery является приемлемым, - это использовать parents функцию

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

Это даст вам первые div, с которыми он столкнется при обходе цепи DOM.Конечно, если вы хотите, чтобы он был немного более конкретным, вы можете указать конкретный класс для всех этих элементов и затем настроить их на self.parents('div.someClass')

Fiddle добавлено

Нажмите, чтобыпроверить рабочую скрипку

Answer 4

Добавление демоверсий 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/