8. Подальший відбір

В jQuery існує низка методів, яка дозволяє провести новий відбір серед раніш відібраних елементів по додатковим умовам

.is(селектор) - поверне значення true, якщо серед усіх раніше відібраних елементів знайдеться хоча б один зазначений в методі .is
.not(селектор) - відкине ті елементи, серед раніше вибраних, які підпадають під зазначений селектор в методі .not
.eq(index) - серед раніше відібраних елементів відбере з зазначеним индексом (порядковим номером). Нумерація елементів йде з нуля.
.slice(begin,end) - робить з вибраних елеметів "вирізку" (вибірку) по порядковим номерам, починаючи з begin (начальний индекс вибірки) по end (кінцевий индекс до якого треба зробити вирізку, не включаючи його). Якщо в end вказати від'ємне число, то рахунок индексу ведеться зворотнім відліком від останньогоелемента першої вибірки
.first() - вибір першого елементу з усіх раніше відібраних
.last() - вибір останнього елементу з усіх раніше відібраних

Приклади

.is(селектор)
<div  class="dv3">
   
<div class="rw1">class "rw1"</div>
</div>
class
"rw1"
Якщо серед блоків є блок з відповідним класом - вивести "Так"
$('#btn').click (function(){
		if($('.dv3 div').is('.rw1')){
				      $('#i1').text("Так");
		}else{
				      $('#i1').text("Ні");
			}
});

.not(селектор)
<div  id="a2">
   
<div class="rw1">class "rw1"</div>
</div>
class
"rw1"
Відкидаємо блок зазначений в .not('.rw1'), а всім іншим червоний бордер
$('#btn').click (function(){
				$('#a2 div').not('.rw1').css('border',"3px solid red");
	});		

.eq(index)
<div  id="a2">
   
<div class="rw1">class "rw1"</div>
</div>
Вибираємо блок з відповідним index
$('#btn').click (function(){
				$('#a2 div').eq(0).css('border',"3px solid red");
	});		

.slice(begin,end)
<div  id="a2">
   
0
1
<>2</div>
3
4
5
6
7
</div>
0
1
2
3
4
5
6
7
Вибираємо блоки в зазначеному диапазоні
$('#btn').click (function(){
				$('#a2 div').slice(0,2).css('border',"3px solid red");
	});		

.first() та .last()
  • Перший в першому
  • Останній в першому
  • Другий список перший
  • Другий список останній
  • Перший в першому
  • Останній в першому
  • Другий список перший
  • Другий список останній
Вибираємо перший li Вибираємо останній li Селектори в дужках не зазначаються
$('#btnfirst').click (function(){
	 $('ul li').first().css('background-color',"blue");/* first */
});
	
$('#btnlast').click (function(){
	 $('ul li').last().css('background-color',"blue");/* last */	
});			

далі ✏
Ігор Ка