如何在JavaScript中获取具有类名的确切父项?

时间:2018-09-01 12:29:42

标签: javascript html

<div class="wrapped">

  <table id="tabled">
    <tr>
        <td>abc</td>
        <td>def</td>
        <td><input type="checkbox" class="chkbox" id="val" onclick="myFunction(this.id)"></input></td>
    </tr>
    <tr>
        <td>abc</td>
        <td>def</td>
        <td><input type="checkbox" class="chkbox" id="val1" onclick="myFunction(this.id)"></input></td>
    </tr>

  </table>

</div>

复选框的ID随我的一些代码自动生成。另外,DIV上有一个循环,其类名为“ wrapped”。整个代码至少打印两次。好像是这样

<div class="wrapped">
  <table id="tabled">
    <tr>
        <td>abc</td>
        <td>def</td>
        <td><input type="checkbox" class="chkbox" id="val1" onclick="myFunction(this.id)"></input></td>
    </tr>
  </table>
</div>    

<div class="wrapped">
  <table id="tabled">
    <tr>
        <td>abc</td>
        <td>def</td>
        <td><input type="checkbox" class="chkbox" id="val2" onclick="myFunction(this.id)"></input></td>
    </tr>
  </table>
</div>

现在,我正在尝试添加一些JS来帮助我获得“包装”类的div。这是我的js

function myFunction(el) {
    var el = document.getElementById(el);
    var r1 = el.closest(".wrapped");
    alert (r1.innerHTML);
}

它总是向我返回“包装”类的First div的HTML。我想要的是,如果我单击ID为val2的复选框,它将返回第二个带有“包装”类的div。但是,在我所有围绕网络的斗争中,我只获得所有选择的第一。提前谢谢

1 个答案:

答案 0 :(得分:1)

但这是正确的,并返回所需的.wrapped格。

您还可以将.wrapped直接传递给函数:

 onclick="myFunction(this.closest('.wrapped'))"

和js:

function myFunction(wr) {
     alert (wr.innerHTML);
}