javascript - 根据树结构从 id 中检索值

Question

目标:
当您按下特定按钮时，例如按钮 id="button_a"，您应该从 id="a1"中检索值，然后它应该显示为警报消息。

问题:
当你有一个 100 到 200 行的表时，你不能在 javascript 中硬编码特定的 id 名称。

问题:
当您按下按钮时，您应该如何检索实例 id="a1"的值？

我已经尝试并了解到您使用“previousSibling”(http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_previoussibling)，但它比我预期的要复杂。

<table>
<tr>
    <td><div id="a1"><div id="aa1">aa1</div></div></td>
    <td><div id="a2"><div id="aa2">aa2</div></div></td>
    <td><button id="button_a"></button></td>
    <td></td>   
</tr>
<tr>
    <td><div id="b1"><div id="bb1">bb1</div></div></td>
    <td><div id="b2"><div id="bb2">bb2</div></div></td>
    <td><button id="button_b"></button></td>
    <td></td>       
</tr>
<tr>
    <td><div id="c1"><div id="cc1">cc1</div></div></td>
    <td><div id="c2"><div id="cc2">cc2</div></div></td>
    <td><button id="button_c"></button></td>
    <td></td>       
</tr>
<tr>
    <td><div id="d1"><div id="dd1">dd1</div></div></td>
    <td><div id="d2"><div id="dd2">dd2</div></div></td>
    <td><button id="button_d"></button></td>
    <td></td>       
</tr>
</table>

Answer 1

如果我没理解错的话，您需要单击按钮时 tr 中第一个 div 的值。您可以使用:

$("button").on("click", function() {
  var val = $(this) //referes to the dom element, in this case the button
    .parents("tr") //get ancestor tr of the clicked element(button)
    .find("td:first-child > div") //find first td that has direct child div
    .text(); //get the text value of the div element
    $(this).after("<span>" + val + "</span>");//for test purposes
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div id="a1">
        <div id="aa1">aa1</div>
      </div>
    </td>
    <td>
      <div id="a2">
        <div id="aa2">aa2</div>
      </div>
    </td>
    <td>
      <button id="button_a">Click!</button>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <div id="b1">
        <div id="bb1">bb1</div>
      </div>
    </td>
    <td>
      <div id="b2">
        <div id="bb2">bb2</div>
      </div>
    </td>
    <td>
      <button id="button_b">Click!</button>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <div id="c1">
        <div id="cc1">cc1</div>
      </div>
    </td>
    <td>
      <div id="c2">
        <div id="cc2">cc2</div>
      </div>
    </td>
    <td>
      <button id="button_c">Click!</button>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <div id="d1">
        <div id="dd1">dd1</div>
      </div>
    </td>
    <td>
      <div id="d2">
        <div id="dd2">dd2</div>
      </div>
    </td>
    <td>
      <button id="button_d">Click!</button>
    </td>
    <td></td>
  </tr>
</table>

引用资料

.parents()

.find()

:first-child