Question

在下面的代码段中，我想在单击Text to grab按钮时得到Edit：

<div class="row">
    <div class="col-xs-12">
      <div class="pbody">
        <p>Text to grab</p>
      </div>
    </div>
  </div>
  <br>
  <div class="row treply">
    <div class="col-xs-1">
      <p>Hi there</p>
    </div>
    <div class="col-xs-1">
      <a class="quote btn" href="#">reply</a>
    </div>

    <div class="col-xs-1">
      <a class="edit btn" href="#">Edit</a>
    </div>
  </div>

有多个具有pbody类的div，但是我想在单击的Edit按钮上方获得直接的div。

我尝试了许多jQuey技巧，例如：

$(document).ready(function () {
  $(".edit").click(function () {
    let postText = $(this).closest(".pbody").children("p").text();
     console.log("postText is:", postText);
  });
});

但是没有一个有效。因此，感谢您的帮助。

Answer 1

您不会根据HTML遍历DOM。尝试以下方法：

$(document).ready(function() {
  $(".edit").click(function() {
    let postText = $(this).closest(".row.treply").prev('br').prev('.row').find('div.pbody > p').text();
    console.log("postText is:", postText);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-12">
    <div class="pbody">
      <p>Text to grab</p>
    </div>
  </div>
</div>
<br>
<div class="row treply">
  <div class="col-xs-1">
    <p>Hi there</p>
  </div>
  <div class="col-xs-1">
    <a class="quote btn" href="#">reply</a>
  </div>

  <div class="col-xs-1">
    <a class="edit btn" href="#">Edit</a>
  </div>
</div>

参考：

无法在上述div中抓取文本

1 个答案: