JavaScript получить внешний родительский идентификатор DIV - PullRequest
Новая
       5

JavaScript получить внешний родительский идентификатор DIV

3 голосов
/ 11 января 2011

У меня есть структура, похожая на приведенную ниже, я пытаюсь получить идентификатор foo. Это только DIV с идентификатором, если мы всплываем из onclick func(), что означает, что не будет других DIV , содержащих идентификатор внутри foo , Однако внутри foo могут быть другие теги, содержащие идентификатор (например, bye, hello).

Каркасы не используются. 

<div id="bar"></div>
<div id="foo">
    <p><p>
    <div class="bye">
        <input id="bye" type="text" value="test" />  
        <input id="hello" type="text" value="test" />
        <table>
            <tr><td onclick="func(event)">1</td></tr>
            <tr><td onclick="func(event)">2</td></tr>
        </table>
    </div>
</div>

Ответы [ 6 ]

8 голосов
/ 11 января 2011 
function findIdOfParent(obj) {
  var o = obj;
  while(!o.id) {
    o = o.parentNode;
  }

  alert(o.id); // 'foo'
}

Функция findIdOfParent принимает узел DOM.Вы можете вызвать его с помощью onclick="findIdOfParent(this);", но если вы хотите передать только event, как в вашем примере, вам придется извлечь узел DOM из event.target или из того, что вы в данный момент делаете.

3 голосов
/ 11 января 2011

Это должно сделать это: 

<div id="bar"></div>
<div id="foo">
    <p><p>
    <div class="bye">
        <input id="bye" type="text" value="test" />
        <input id="hello" type="text" value="test" />
        <table>
            <tr><td onclick="func(this)">1</td></tr>
            <tr><td onclick="func(this)">2</td></tr>
        </table>
    </div>
</div>

<script type="text/javascript">
    function func(elt) {
            // Traverse up until root hit or DIV with ID found
        while (elt && (elt.tagName != "DIV" || !elt.id))
            elt = elt.parentNode;
        if (elt) // Check we found a DIV with an ID
            alert(elt.id);
    }
</script>
1 голос
/ 11 января 2011

Не можете ли вы применить более простой шаблон? Вместо того, чтобы иметь свойства onclick в ваших ячейках, прикрепите обработчик одного клика к вашему внешнему div (ам), тогда вам просто нужно обратиться к this: 

document.getElementById("foo").onclick = function(event) {
    if(e.target.tagName.toLowerCase() == "td") {
        alert(this.id);
    }
};

http://jsfiddle.net/fRxYB/

Или я полностью пропустил точку?

1 голос
/ 11 января 2011

Элемент - это элемент, который вызывает функцию при нажатии 

var found = false;
var myId = "";
while (elem &&!found) { 
    if (elem.id){
        found = true; 
        myId = elem.id;
    }
    elem = elem.parentNode; 
}
1 голос
/ 11 января 2011

Вы можете использовать свойство parentNode для выбранного элемента, чтобы выполнить итерацию вверх по дереву DOM.

т.е.: 

<td onclick="func(this)">
function func(item)
{
   var parent = item.parentNode;
   // and so on, or something similar
   var divId = div.id;
}
0 голосов
/ 11 января 2011

Чтобы иметь более общую версию, я бы предложил: 

function func(event) {
    var par = findTop(event.target);
    console.log(par);
};

function findTop(node) {
    while(node.parentNode && node.parentNode.nodeName !== 'BODY') {
        node = node.parentNode;
    }

    return node;
}

пример: http://www.jsfiddle.net/4yUqL/37/

...