jQuery 内容分离

Question

我有以下结构：

<div class="cardapio-content">
    <h5>Tittle of tab 1</h5>
    <p>Content of tab 1</p>
    <h5>Tittle of tab 2</h5>
    <p>Content of tab 2</p>
    <h5>Tittle of tab 3</h5>
    <p>Content of tab 3</p>
</div>

并且想要获取每个 h5 并添加到另一个 div

，关联 p每个选项卡的 h5 下方的 内容。

我尝试过 each 但不知道如何获取相对于 h5 索引的 p 。

jQuery('.cardapio-content h5').each(function(k, v) {
    alert(jQuery('.cardapio-content')[k].html());
})

谢谢。

Answer 1

只需使用 .next()：

jQuery('.cardapio-content h5').each(function(){
    var h5 = $(this);
    var p = $(this).next();
});

http://api.jquery.com/next

Answer 2

使用 jQuery 的 .eq 来获取您想要的元素。

jQuery('.cardapio-content h5').each(function(k, v) {
    alert(jQuery('.cardapio-content p').eq(k).html());
})

Answer 3

DEMO jsBin

仅在 each 函数中使用.next() 和 .andSelf() 选择器，将它们包装在一起：

$('.cardapio-content h5').each(function(){
  $(this).next('p').andSelf().wrapAll('<div class="cardapio-menu" />');
});