从 h2 动态抓取文本并将其附加到按钮

Question

我有一组选项卡，每个选项卡中都有一个 h2，我现在正尝试在每个选项卡内容的底部添加一个按钮以移动到下一个。我已经设法使用以下代码做到这一点：

$(this).append("<a href='#' class='next-tab' rel='" + next + "'>Next</a>");

但是我现在想在下一个文本之后自动添加 h2 中的标题，因此 link 文本最终会变成 "Next title text"，其中标题文本会根据哪个选项卡而改变轮到你了。猜猜第一个问题是，这可能吗？

标记看起来像这样：

<div id="tabs-1">
    <h2>Title 1</h2>
    <p>content here</p>
    <a href="#" class="next-tab mover" rel="2">Next</a>
</div>
<div id="tabs-2">
    <h2>Title 2</h2>
    <p>content here</p>
    <a href="#" class="next-tab mover" rel="3">Next</a>
    <a href="#" class="prev-tab mover" rel="1">Previous</a>
</div>
<div id="tabs-3">
    <h2>Title 3</h2>
    <p>content here</p>
    <a href="#" class="prev-tab mover" rel="2">Previous</a>
</div>

所以我想将下一个选项卡 h2 附加到下一个按钮，将上一个选项卡附加到上一个选项卡。

所以我需要一些类似

的东西

$( "h2" ).insertAfter( $( ".next-tab" ) );

但它需要知道哪个 h2 select…

Answer 1

我想你正在寻找这样的东西：

$('.mover').each(function () {
    $(this).text($(this).text() + '(' + $('#tabs-' + $(this).attr('rel')).find('h2').text() + ')');
});

这是演示：http://jsfiddle.net/2y7cemyw/1/

从 h2 动态抓取文本并将其附加到按钮

Dynamically grab text from a h2 and append it to a button

jquery

append