jQuery存储和引用一个项目数组

在jQuery/Javascript术语中，我并不完全是我想要的。我正在寻找的行为类似于典型的lightbox幻灯片放映，包含以下元素：

$("ul li a").click(function(e){
    var $this = $(this);
    $("<div class='overlay'></div>")
        .data('trigger', $this)
        .appendTo(body)
        .load($this.attr('href'));
    e.preventDefault();
});

• 项目清单
• 单击某个项目将显示一个新元素，该元素引用列表中的项目
• 而新元素包括返回到项目列表的下一个/上一个导航

我正在构建类似的东西，并且正在寻找处理上述问题的技术方法

我有以下示例代码：

<ul>
    <li><a href="samplelink.html">item 1</a></li>
    <li><a href="anotherlink.html">item 2</a></li>
    <li><a href="onemorelink.html">item 3</a></li>
</ul>

我已经做了一些设置，这样每个LI都会得到一个click事件，在页面上创建一个新的overlay DIV，然后在其中执行.load（$（this）.attr（'href]）

所有这些都很有效

---

我不知道如何做的是，将我单击的LI的索引传递到新div，这样我就可以添加正确的prev/next链接，并实际引用原始列表中的next/prev元素。具体的例子是，如果我在我创建的新DIV中单击第二个列表项，我如何向其中传递“是第二个链接打开了这个”的信息

在div代码中，您可以再次选择与传递的href值匹配的项，并使用next（）和prev（）获取给定元素的其他同级项。

尝试以下操作：

<ul>
    <li><a href="1">item 1</a></li>
    <li><a href="2">item 2</a></li>
    <li><a href="3">item 3</a></li>
</ul>

<a id="next">next</a>
<a id="prev">prev</a>

<script>
$('ul').bind('click', function(e) {
    var target = $(e.target);
    if (!target.is('a')) {
      return;
    }
    var li = target.parent();
    console.log('opening: '+target.attr('href'));

    var next = li.is(':last-child') ? li.siblings(':first') : li.next();
    var prev = li.is(':first-child') ? li.siblings(':last') : li.prev();

    $('#next').unbind('click').bind('click', function(e) {
        next.children('a').trigger('click');
    })
    $('#prev').unbind('click').bind('click', function(e) {
        prev.children('a').trigger('click');
    })
    e.preventDefault();
})
</script>

下一个
上
$（'ul'）.bind（'click'，函数（e）{
var目标=$（e.target）；
如果（！target.is（'a'））{
返回；
}
var li=target.parent（）；
console.log（'opening:'+target.attr（'href'））；
var next=li.is（':last child'）？li.sides（':first'）：li.next（）；
var prev=li.is（':first child'）？li.sibbines（':last'）：li.prev（）；
$（'#next'）。解除绑定（'click'）。绑定（'click'，函数（e）{
next.children（'a'）。trigger（'click'）；
})
$（'prev'）。解除绑定（'click'）。绑定（'click'，函数（e）{
上一个子项（'a'）。触发器（'click'）；
})
e、 预防默认值（）；
})

创建

div

时，使用jQuery

数据

功能基本上“链接”两个DOM元素：

$("ul li a").click(function(e){
    var $this = $(this);
    $("<div class='overlay'></div>")
        .data('trigger', $this)
        .appendTo(body)
        .load($this.attr('href'));
    e.preventDefault();
});

---

为

prev

写的几乎相反，我应该如何将href值放入div以与之匹配？我想我每次都可以把它传递给一个隐藏的链接。