jQuery - 获取具有不同内容但同一类的元素的内容

Question

我目前正在为我的网站创建一个简单的论坛系统，我希望用户能够互相引用。

我通过使用php：

执行while() loop来显示每个帖子

while ($post = $p->fetch(PDO::FETCH_ASSOC)) {

  //Post Content in here.
  <p class='post-text'>$text</p>
  <a href='javascript:void(0)' class='quote'>Quote</a>

}

上面的代码将输出示例：

<p class='post-text'>Post 1</p>
<p class='post-text'>Post 2</p>

当用户要引用其中一个帖子时，我想获取.post-text的内容。如何实现这一目标？

目前，我只有这个：

$('.quote').click(function() {

        alert($('.post-text').text());

    });

这将输出所有 .post-text内容：

post1post2

现在，假设有多个帖子 - 如何根据引用的帖子获取.post-text的内容？

Answer 1

根据我的理解，您正在寻找带有.post文本的前一个元素，您可以按如下方式获取：

$('.quote').click(function() {
    $(this).prev('.post-text').text();
}

Answer 2

您可以使用Jquery .prev（）选择器。这将选择DOM树中的前一个元素。但请注意，这只有在确保引号按钮位于包含帖子文本的div之后才有效。

$('.quote').click(function() {
  alert($('.post-text').prev().text());
});

Answer 3

我认为将它们包装在div标签内。​​

<div class="posts">
  User A
  <p class='post-text'>Post 1A</p>
  <p class='post-text'>Post 2A</p>
  <a href='javascript:void(0)' class='quote'>Quote</a>
</div>
<div class="posts">
  User B
<p class='post-text'>Post 1B</p>
<p class='post-text'>Post 2B</p>
<a href='javascript:void(0)' class='quote'>Quote</a>
</div>
   <script>
$(".quote").click(function(){
alert($(this).parent(".posts").children(".post-text").text());
})
</script>

// script：将输出容器内的所有帖子取决于单击的引用

Answer 4

一个简单的解决方案是将帖子ID包含为标识符：

while ($post = $p->fetch(PDO::FETCH_ASSOC)) {

  //Post Content in here.
  <p class='post-text' id='post-". $post->id ."'>$text</p>
  <a href='javascript:void(0)' class='quote' data-id='post-". $post->id ."'>Quote</a>

}

然后我JS：

$('.quote').click(function() {

    alert($('#post-'+ $(this).data('id')).text());

});