Question

也许有一个简单的解决方案，但我无法弄明白。

我有一堆像这样的照片：

<div class='image-bar'>
    <span>
      <img class='my-image' src='blah1' id='1'>
    </span>
    <span>
      <img class='my-image' src='blah2' id='2'>
    </span>
    <span>
      <img class='my-image' src='blah3' id='3'>
    </span>
</div>

考虑到图像的id，我需要使用jQuery找到它的下一个和上一个图像。

以2为例，我尝试了下面的图片：

$('.image-bar').find('.my-image[id="2"]').next();

我认为直到我的属性等于＆＃39;选择器我是正确的，但由于id为3的图像并不完全是兄弟，所以next（）不起作用。我怎么处理这个？任何指针都非常感谢！

Answer 1

这不会起作用，因为元素被包裹在跨度中，你需要相对于图像的父亲而言。

var next = $('.image-bar').find('.my-image[id=2]').parent().next().find('img');
var prev = $('.image-bar').find('.my-image[id=2]').parent().prev().find('img');

修改

假设您可能有更多图像要处理并且对相同的功能感兴趣，您可以执行以下操作：

var elementId = "2"; var next = $('.image-bar').find('.my-image[id=' + elementId + ']').parent().next().find('img'); var prev = $('.image-bar').find('.my-image[id=' + elementId + ']').parent().prev().find('img');

Answer 2

如果您有id个名字，我还有另一个解决方案

var imgArray = $(".my-image"); // this will have an array with all images

查找id = 2

的图像

var id = 2;
imageArray[id-1]; // returns image with id 2

查找下一张图片

imageArray[id];

查找上一张图片

imageArray[id-2];

注意：您需要检查数组索引是否存在。

Fiddle here

var imgArray = $(".my-image"); // this will have an array with all images

console.log( getImage(2/* image id */, "next"));

function getImage(id, pos) {
   var returnImage; 

   if(pos === "next") {
       returnImage = imgArray[id] ? imgArray[id] : "";  
   }
   else if(pos === "prev") {
        returnImage = imgArray[id - 2 ] ? imgArray[id - 2] : "";    
   }
   else {
       returnImage = imgArray[id-1] ? imgArray[id-1] : "";      
   }
   return returnImage;
}

Answer 3

尝试使用.filter()，.index()，.slice()

＆＃13;

var imgs = $(".image-bar img");

var curr = imgs.filter("#2");

var i = curr.index(imgs.selector);

var prev = imgs.slice(i - 1, i);

var next = imgs.slice(i + 1, i + 2);

console.log("curr:"+curr[0].id
           , "curr index:" + i
           , "prev:" + prev[0].id
           , "next:" + next[0].id);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class='image-bar'>
    <span>
      <img class='my-image' src='blah1' id='1'>
    </span>
    <span>
      <img class='my-image' src='blah2' id='2'>
    </span>
    <span>
      <img class='my-image' src='blah3' id='3'>
    </span>
</div>

＆＃13;

使用jquery旁边找到＆＃34;嵌套＆＃34;兄弟

3 个答案: