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

试试这个（jQuery版本）：

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

Fiddle

Answer 2

你的意思是：

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

演示:: jsFiddle

Answer 3

使用 closest 转到父.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());
});

<强> Demo

如何使用通用标记获取特定元素文本

3 个答案:

试试这个（jQuery版本）：

Fiddle