首页 > 解决方案 > 如何在 JavaScript 中获取具有类名的确切父项?

问题描述

<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 上还有一个循环,类名“已包装”。整个代码打印至少 2 次。好像是这样

<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 来帮助我获得带有“Wrapped”类的 div。这是我的js

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

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

标签: javascripthtml

解决方案


但它是正确的并返回所需的.wrappeddiv。

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

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

和js:

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

推荐阅读