javascript obtenir de l'extérieur parent id de la DIV

J'ai une structure qui ressemble à celui ci-dessous, je vais essayer d'obtenir l'id foo. C'est le seulement DIV avec l'id, si nous remonter jusqu'à partir de la onclick func(), ce qui signifie qu'il n'y aura pas d'autres DIVs qui contiennent une identification à l'intérieur de foo. Cependant, il peut y avoir d'autres balises à l'intérieur foo qui contiennent un identifiant (comme bye, hello).

Pas de cadres sont utilisés.

<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>
Quelle est ta question exactement??
Essayer d'obtenir l'id FOO quand je clique sur une cellule de tableau.
pour citer: je vais essayer d'obtenir l'id de foo. C'est la question.
Merci à tous! exactement ce que je cherchais!

OriginalL'auteur Mike | 2011-01-11

  1. 3

    Cela devrait le faire:

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

    OriginalL'auteur MarkXA

  2. 8
    function findIdOfParent(obj) {
  var o = obj;
  while(!o.id) {
    o = o.parentNode;
  }

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

    La fonction findIdOfParent prend un nœud DOM. Vous pourriez l'appeler avec onclick="findIdOfParent(this);", mais si vous voulez passer event, comme dans votre exemple, vous auriez à extraire le nœud DOM à partir de event.target ou ce que vous êtes en train de faire.

    ce doit être la bonne réponse, pas la accepté de répondre à ce qui n'ont pas la moindre explication

    OriginalL'auteur David Hedlund

  3. 1

    Vous pouvez utiliser la propriété parentNode de l'élément cliqué pour itérer jusqu'à travers l'arborescence DOM.

    ie: 

    <td onclick="func(this)">
function func(item)
{
   var parent = item.parentNode;
   //and so on, or something similar
   var divId = div.id;
}

    OriginalL'auteur Steve

  4. 1

    elem est l'élément que l'appel de la fonction sur cliquez sur

    var found = false;
var myId = "";
while (elem &&!found) { 
    if (elem.id){
        found = true; 
        myId = elem.id;
    }
    elem = elem.parentNode; 
}

    OriginalL'auteur stecb

  5. 1

    Ne pouvez pas vous appliquez un simple modèle? Au lieu d'avoir onclick propriétés dans vos cellules, joindre un seul gestionnaire de clic sur votre ultrapériphériques div(s), alors vous devez vous référer à this:

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

    http://jsfiddle.net/fRxYB/

    Ou suis-je complètement à côté de l'essentiel?

    OriginalL'auteur karim79

  6. 0

    D'avoir un peu plus de version générique, je te suggère ceci:

    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;
}

    exemple: http://www.jsfiddle.net/4yUqL/37/

    OriginalL'auteur jAndy