Как определить первый элемент?

Question

[Faksi]

делаю собственную галерею для диплома и столкнулся с такой проблемой: нужно определить первую и последнюю картинку и что бы при их всплыве в модальном окне не были отображены кнопки prev и next соответственно. Вот код:

<div id="gallery">
		<a class="gal-img" href="" alt=""><img src="gallery/orig/1.jpg"></a>
		<a class="gal-img" href="" alt=""><img src="gallery/orig/2.jpg"></a>
		<a class="gal-img" href="" alt=""><img src="gallery/orig/3.jpg"></a>
		<a class="gal-img" href="" alt=""><img src="gallery/orig/4.jpg"></a>
</div>
<div id="modal">
		<span class="close"></span>
		<span class="next"></span>
		<span class="prev"></span>
		<div class="view">	
		</div>
	</div>

$('.gal-img').on('click', function(e){
		var image = $(this).find('img');
		e.preventDefault();
		if($('.gal-img').not(':first-child')){
			$('.prev').show();
		}else{$('.prev').hide()};
		$('.view').find('img').remove();
		$('.view').append("<img src='"+$(image).attr('src')+"'>");
		$('.gal-img.gal-act').removeClass('gal-act');
		$(this).addClass('gal-act');
		cover.fadeIn();
		modal.fadeIn();
	});
										
									
	$('#cover').on('click', function(e){
		modal.fadeOut();
		cover.fadeOut();
	});
	$('.close').on('click', function(e){
		modal.fadeOut();
		cover.fadeOut();
	});
	$('.next').on('click', function(){
		var image = $('.gal-img.gal-act').next('.gal-img');
		$('.view').find('img').remove();
		$('.gal-img.gal-act').removeClass('gal-act').next().addClass('gal-act');
		$('.view').append("<img src='"+$(image).find('img').attr('src')+"'>");
	});
	$('.prev').on('click', function(){
		var image = $('.gal-img.gal-act').prev('.gal-img');
		$('.view').find('img').remove();
		$('.gal-img.gal-act').removeClass('gal-act').prev().addClass('gal-act');
		$('.view').append("<img src='"+$(image).find('img').attr('src')+"'>");
		
	});

Answer 1

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

Как вывести номер элемента в списке на котором произошло событие?
А также is(), :first-child, :last-child.

Вариант 1 (храним ссылку на активный объект)

$(function () {
	var images = $('.gal-img'),
		active = images.eq(0);

	// Some other actions

	$(document)
		.on('click', '.next', function(){
			var next = active.next('.gal-img');

			if (next.is(':last-child')) {
				// stop
			} else {
				active = next;
				// actions
			}
		}).on('click', '.prev', function(){
			var prev = active.prev('.gal-img');

			if (prev.is(':first-child')) {
				// stop
			} else {
				active = prev;
				// actions
			}
		});
});

Вариант 2 (храним индекс)

$(function () {
	var images = $('.gal-img'),
		index = 0;

	// Some other actions

	$(document)
		.on('click', '.next', function (e) {
			if (index == images.length - 1) {
				// stop
			} else {
				index++;

				var elem = images.eq(index);
				// actions
			}
		}).on('click', '.prev', function (e) {
			if (index == 0) {
				// stop
			} else {
				index--;

				var elem = images.eq(index);
				// actions
			}
		});
});

Comments

[Faksi]

я делал с помощью них, но наверное как то неправильно, гуглом умею пользоваться) мне бы конкретно мой случай разобрать, просто не получается что то( не определяется элемент если стрелочками переключать

Answer 2

[Роман]

https://api.jquery.com/first/
https://api.jquery.com/last/

Comments

[Faksi]

не определяется номер элемент если стрелочками переключать, а если клацать на последнее изображение или первое то работает как нужно

[Роман]

Faksi: вам нужно делать проверку через условие
Псевдокод:

если ($(элемент).последний()){
   скрыть стрелочку вправо; 
}
или 

если ($(родитель).find(элемент).eq(0){
   скрыть стрелочку влево;
}

[Faksi]

спасибо, хоть про функцию .eq узнал

Answer 3

[LittleFatNinja]

css:
:first-child
:last-child