В данном посте посмотрим что можно сделать с выборкой элементов jQuery. В принципе там ничего сложного, это обычный массив, но есть пара нюансов. Пусть у нас есть html страница
|
1 2 3 4 5 |
... <div id='mydiv1' class="myClass"> mydiv1 </div> <div id='mydiv2' class="myClass"> mydiv2 </div> <div id='mydiv3' class="myClass"> mydiv3 </div> ... |
Сделаем простую выборку
|
1 |
$('.myClass') |
Тогда вот что мы можем сделать с данной выборкой
Свойство length
|
1 |
alert($('.myClass').length); // выведет 3 |
Обращение к элементу
Поскольку возвращаемое множество это массив, то можем обратиться таким образом
|
1 |
alert($('.myClass')[0].innerHTML); // выведет mydiv1 |
Функция eq
Позволяет обращаться к отдельному элементу массива с помощью методов jQuery
|
1 |
jQuery('.myClass').eq(0).css('background-color','yellow'); |
Первый и последний элементы
|
1 2 |
jQuery('.myClass').first(); jQuery('.myClass').last(); |
Перебор выборки
|
1 2 3 4 5 |
$(function(){ $('.myCass').each(function(index, elem){ console.log(index + ". " + elem.innerHTML); }); }); |
Остальные методы есть в документации и на сайте.
Поиск в выборке
Здесь мы будем использовать метод find, на выходе дает другую выборку
find(селектор):find(элемент):find(jQuery):
Вот интересная статья по поводу поиска в выборке.