Question

我有一个像这样的html结构：

<a href="/target"><img src ='image1.png' /></a>
<a href="/target1"><img src ='image2.png' /></a>
<a href="/target2"><img id="img3" src ='image3.png' /></a>
<a href="/target3"><img src ='image3.png' /></a>
<a href="/target4"><img src ='image5.png' /></a>

让我们说有人点击＃img3。我需要从上一张和下一张图片中获取所有href属性。

最后的目标是获得一个列出所有src的数组。从图像开始，我点击了。

我的想法是，为了得到prevois hrefs，目前的已知，以及下一个。有了这些，我想建立一个数组。

重要的是，保持hrefs的顺序。

一个例子（点击了#img）：

数组应如下所示：

var hrefs = [target2,target3,target4,target,target1];

点击了另一个例子（image5.png）：

href的数组应该是构建的，看起来像这样。

var hrefs = [target4,target,target1,target2,target3];

试着想象一下，图像放在一个圆圈上。我正在谈论的顺序是顺时针。

也许有一种更好的方式，而不是我的方式。

另一个想法是通过将已知元素设置为0来构建包含所有href和reindex（构建新索引）的数组。

欢迎任何帮助

Answer 1

试试这个

$('img').on('click', function(e){

    var $this = $(this),
        $closest = $this.closest('a'),
        $prev = $closest.prevAll('a'),
        $next = $closest.nextAll('a'),
        result = [$closest[0]].concat($next.get()).concat($prev.get().reverse()),
        hrefs = $(result).map(function(i, e){ return e.href; }).get();

    console.log(result, hrefs);

    e.preventDefault();
});

http://jsfiddle.net/rEcm4/2/

也许不是最漂亮的解决方案，但是嘿。

图像源阵列更新：http://jsfiddle.net/rEcm4/3/

从上一个和下一个父级兄弟姐妹中获取属性并维护顺序

1 个答案: