使用下一个div中的文本设置“下一个”按钮的文本

Question

我正在尝试将下一个按钮的html设置为下一个div中<h2>的内容？

<div id="survey-1" class='content'>
    <h2>Bob</h2>
    <a href="#" class='next button'></a>                      
</div>

<div id="survey-2" class='content'>
    <h2>Fred</h2>
    <a href="#" class='next button'></a>                      
</div>

<div id="survey-3" class='content'>
    <h2>Joey</h2>
    <a href="#" class='next button'></a>                      
</div>

到目前为止我只有，

for (var i = 1; i <= 3; i++) {
        $('.next').html('Next Student '+$("#survey-"+i).children().html());
};

但我希望他们与众不同......任何想法？

Answer 1

尝试以下方法：

$('.next').each(function(){
  $(this).text($(this).parent().next().find('h2').text());
});

Demo Fiddle

Answer 2

检查此 Demo js Fiddle

的jQuery

$(document).ready(function(){
    $('.next').text(function(){
      $(this).text($(this).prev('h2').text());
    });
});  

jQuery text() 方法 - text（）方法将匹配元素集合中每个元素的文本内容组合在一起，包括它们的后代。

---

检查此 Demo js Fiddle

的jQuery

$(document).ready(function(){
    $('.next').each(function(){
       $(this).text($(this).prev('h2').text());
    })
});  

jQuery each() 方法 - 为每个方法元素和执行函数循环的each（）方法。