Javascript Jquery将Div替换为下一个和上一个链接

我有一个jquery脚本，当选择a href=“#1”时，它会将div（child1替换为child2）替换为div。我在菜单中安排了如下内容：

<div id=menu">
 <div class="menu_item">
      <a href="#" class="drop_menu"></a>
       <div id="parent">
          <div class="child1">Child 1 Contents</div>
          <div class="child2">Child 2 Contents</div>
       </div>
       <div id="replacepagelinks">
          <a href="#1">Replace Child 1 with Child 2</a>
          <a href="#2">Replace Child 2 with Child 1</a>
       </div>
 </div>
 <div class="menu_item">
      <a href="#" class="drop_menu"></a>
       <div id="parent">
          <div class="child1">Child 1 Contents</div>
          <div class="child2">Child 2 Contents</div>
       </div>
       <div id="replacepagelinks">
          <a href="#1">Replace Child 1 with Child 2</a>
          <a href="#2">Replace Child 2 with Child 1</a>
       </div>
 </div>
 <div class="menu_item"> etc.. </div>

这将隐藏相应的div+链接

$('#replacepagelinks a').click(function(){
    $(this).hide().siblings().show()
    var w = this.hash.replace('#', '');
    $('#parent div.child'+w).show().siblings().hide()
})

它将

child1

替换为

child2

div，并将

a href

链接从#1更改为#2。在这里，我希望

和

在不同的类中，这样我就可以让它们作为页面两侧的“下一个”和“上一个”链接，如下所示：

<div id="replacepagelinks">
    <div class="pagelink_left">
       <a href="#2">Back</a>
    </div>
    <div class="pagelink_right">
       <a href="#1">Next</a>
    </div>
    <div class="clear"></div>
</div>

我的主要问题是，我希望能够拥有2个以上的div-child，但不知道如何更新jquery以反映这一点

1.在child1中，我只想要

2.在child2中，我想要

和

3.在child3中，我想要

和

4.在child4中，我想要

和

5.在child5中，我只想要

因此，除了第一页只有“下一页”链接和最后一页只有“上一页”链接外，每个页面都有“下一页”和“上一页”链接

更复杂的是：）有些菜单项有2个子div，有些有3个子div，有些有4个子div。在这些情况下，我希望最后一页（分别为2、3和4）只显示一个返回上一页的链接

谢谢你的帮助。Pia

您可以根据需要使用>

<div id="replacepagelinks">
    <div class="pagelink_left">
       <a href="#2">Back</a>
    </div>
    <div class="pagelink_right">
       <a href="#1">Next</a>
    </div>
    <div class="clear"></div>
</div>

$(".drop_menu").on('click', function() {
    $(this).parent().find('.child1, a[href="#2"]').show().siblings().hide();
});