bester Weg, um das übergeordnete div zu erreichen - javascript

Question

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

Was wäre im obigen Beispiel der beste Weg, um die id des div an a_function zu übergeben? Gibt es einen besseren Weg als onclick='a_function(this.parentNode.parentNode.parentNode.id)'

Answer 1

Wenn Sie JQuery verwenden, dann .closest() kann Ihr Problem lösen.

Answer 2

Wenn Sie es aus dem Inline-Handler herausnehmen wollen, können Sie einfach this dann in der Methode ... durchlaufen.

onclick='a_function(this)'

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

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

---

Oder wenn Sie sich nicht wiederholen möchten parentNode machen Sie eine Funktion...

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/

---

Oder verwenden Sie es direkt inline...

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

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

Answer 3

Der beste Weg, jetzt, dass der OP sagt jQuery ist akzeptabel, ist die Verwendung der parents fonction

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

Damit erhalten Sie die erste div auf die es beim Durchlaufen der DOM-Kette stößt. Wenn Sie es etwas spezifischer haben wollen, können Sie natürlich eine bestimmte Klasse für all diese Divs angeben und sie dann als self.parents('div.someClass')

Fiddle hinzugefügt

Klicken Sie hier, um die Funktionstüchtigkeit der Fiddle zu prüfen

Answer 4

Sie können eine einfache "upTo"-Funktion verwenden, um den ersten Vorfahren mit einer bestimmten tagName . Wenn kein passendes Element gefunden wird, gibt es undefined :

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

Aber wenn Sie jQuery verwenden, würden Sie das zweifellos vorziehen.