将prev和next按钮添加到li项php或jquery

我有一个ul，它通过php用li元素填充

我希望能够在li项目中添加prev next按钮，以访问列表中的prev和next项目。列表项打开一个jquery模式，href为#example。如何将href值添加到查询模式中的prev和next按钮？或者我用php添加它们

<div id="gallery">
    <ul class="gallery">
        <?php
        foreach ($employees as $employee1) {
            echo '<li>
                    <a href="#' . $employee1[0] . '"  data-toggle="modal" class="modalLink"><img src="assets/img/' . $employee1[0] . '.jpg"/></a>
                </li>';
        }
        ?>
    </ul>
</div>

<div id="modals">

        <?php
        foreach ($employees as $employee2) {
            echo '
            <div id="' . $employee2[0] . '" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-header">
                    <a href="">prev</a>
                    <button type="button" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button><a href="" class="nextarrow">next</a>
                </div>
                <div class="modal-body">
                    ........
                </div>
            </div>';
        }
        ?>

</div>

您需要使用javascript代码，如

function showNext(){
    $('#current_id').modal('hide');
    $('#next_id').modal('show');
}

您可以像

next\u id=current\u id+1

那样填充next\u id

将一个公共类添加到所有“prev”链接，将另一个类添加到所有“next”链接，如果去掉容器列表，则更容易找到next/prev模式：

HTML

<div id="modals">
    <?php
    foreach ($employees as $employee2) {
        echo '
        <div id="' . $employee2[0] . '" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-header">
                <a href="#" class="prev">prev</a>
                <button type="button" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <a href="#" class="next">next</a>
            </div>
            <div class="modal-body">
                ........
            </div>
        </div>';
    }
    ?>
</div>

---

有没有一种方法可以在不硬编码idtip的情况下实现这一点：您可以在两个循环中使用相同的变量，无需

employee1

和

employee2

这部分有效。一个实时站点的主要问题是modals被从显示的dom中删除，然后在关闭时重新插入到modals组的最后一个元素下面，所以这有一些奇怪的行为。基本上是第一次通过下一次点击一切工作，然后关闭后，订单是所有的混乱，不再涉及缩略图订单。这是我的最终代码，工作得很好<代码>$（'.prev'）。单击（函数（e）{e.preventDefault（）；var modalId=$（'.modal.in'）.attr（'id'）；var link=$（'a.modalLink[href='.#“+modalId+”）；var previous=$（link.parent（）.prev（）.find（'a.modalLink'））；var previousId=$（previousId.）.attr（'href'）$（'modalId'）。model（'hide'））；$（previousId'）。model（'show'））;

$('.prev').click(function(){
    $(this).closest('.modal').modal('hide').prev('.modal').modal('show');
});
$('.next').click(function(){
    $(this).closest('.modal').modal('hide').next('.modal').modal('show');
});