javascript - 如何使用通用标签获取特定元素文本

Question

使用以下 html

<div class="span4">
<h3>Someones Name</h3>
<p><a class=btn href="">Bio</a></p>
</div>

是否可以使用 Jquery/javascript ，当用户单击按钮时，可以返回按钮上方的文本。如果页面有很多这种html模式的实例，是否可以只返回按钮上方的h3？每个块之间的唯一区别是 Somes Name 更改。

例如

<div class="span4">
<h3>Name1</h3>
<p><a class=btn href="">Bio</a></p>
</div>
<div class="span4">
<h3>Name2</h3>
<p><a class=btn href="">Bio</a></p>
</div>

如果每个 btn 单击/绑定事件仅分别返回 Name1 和 Name2，那就太好了。

Answer 1

使用最接近到达父级 .span4，然后找到h3.

$('.btn').on('click', function (e) {
    e.preventDefault();// to prevent the default behavior of anchor a click from redirecting.
    alert($(this).closest('.span4').find('h3').text());
});

演示

Answer 2

试试这个（jQuery 版本）：

$('.btn').on('click', function(e) {
  e.preventDefault();
  var $h3 = $(this).parent().prev();
  alert($h3.text());
  return false;
});

小提琴

Answer 3

你的意思是这样的：

$("a.btn").click(function(e) {
   e.preventDefault();
   var h3text = $(this).parents(".span4").find("h3").text();
   alert(h3text);
});

演示:: jsFiddle