遍历,然后退回DOM

时间:2015-05-04 01:52:52

标签: javascript jquery html events dom

我有一个点击事件设置,在其代码块中我存储了某些兄弟元素的值。现在,如果我想在点击.title按钮后.play范围内的文字,我必须向上走两层,然后回到.title

我想知道从两个或多个父div中包含的兄弟元素访问信息的更好方法是什么?

HTML

<table>
  <tr>
    <td>
      <button class="play">Play</button>
    </td>
    <td>
      <span class="number">01.</span>
    </td>
    <td>
      <span class="title">Track 1</span>
    </td>
  </tr>
  <tr>
    <td>
      <button class="play">Play</button>
    </td>
    <td>
      <span class="number">02.</span>
    </td>
    <td>
      <span class="title">Track 2</span>
    </td>
  </tr>
</table>

JS

$(function() {
  $(".play").on("click", function() {
    var number = $(this).parent().parent().find(".number").text(),
    title      = $(this).parent().parent().find(".title").text();

    console.log(number + title);
  });
});

2 个答案:

答案 0 :(得分:0)

您可以使用closest()返回公共父级

  var number = $(this).closest('tr').find(".number").text(),
   title      = $(this).closest('tr').find(".title").text();

fiddle

答案 1 :(得分:0)

您可以使用jQuery的closest()函数。

var number = $(this).closest('tr').find(".number").text(),
title      = $(this).closest('tr').find(".title").text();