Как отобрать следующий элемент в each()?

Question

[Никита Пиковец]

Хочу написать слайдер, есть массив фотографий и реализован всплывающий попап при нажатии на картинку которой присваивается класс current, не могу разобраться как отобрать следующую картинку по ее индексу используя ф-ю each(), подскажите пожалуйста.

Answer 1

[Евгений Петров]

Вам не нужен никакой цикл
Предположим, есть коллекция картинок (конечно же вложенных в другие элементы), и мы её нашли (для верности поиска пусть у каждой будет атрибут data-image):
var list = $('[data-image]');

index()
Дальше всё просто. Например, мы кликнули на картинку и поймали событие

$(document).on('click', '[data-image]', function (e) {
	list.index($(this)); //это — индекс элемента в найденной ранее коллекции
});

eq()
Чтобы найти любой элемент в коллекции, нужно всего лишь вызвать у неё обращение к элементу по индексу

$(function () {
	var list = $('[data-image]');

	list.on('click', function (e) {
		var current = $(this), //элемент коллекции, на котором произошёл клик
			next = list.eq(list.index(current) + 1); //а вот и он — следующий элемент коллекции
	});
});

Очевидно, что если бы картинки лежали одна за одной, нам пригодился бы next(). Однако, едва ли это встретится на практике, и манипуляции с уже найденной коллекцией надёжны и просты.

Comments

[Сергей delphinpro]

list.index(this); - так код покрасивее выглядит =)

[Евгений Петров]

Сергей: Да, вы правы. Трансформация в jQuery-объект может производиться и не нами.

Answer 2

[Денис Инешин]

Ну например так:

var current = N;

$(elements).each(function (i) { // <- each может принимать итератор
    if (i === current + 1) {
       // 
    }
});

но вообще сомнительно использовать each для таких целей. В jQuery есть кучи других полезностей, вроде .next();