Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Работа с выбранными элементами

100

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

В большинстве случаев работа с jQuery осуществляется в два этапа, следуя одному и тому же шаблону:

  • первый этап заключается в выборе с помощью функции $() начального набора элементов страницы, соответствующих определенному критерию отбора, которые возвращаются в виде содержащего их объекта jQuery;

  • а второй — в выполнении над каждым элементом набора одной или нескольких операций, приводящих к созданию конечного набора.

В этой статье мы сосредоточим свое внимание на первом из этапов. Будут рассмотрены методы jQuery, позволяющие управлять выбранным набором и корректировать его состав в точном соответствии с конкретными задачами. Обычно исходят из некоего предварительно выбранного набора элементов, воздействуя на который, добиваются того, чтобы в нем остались лишь действительно необходимые элементы.

Расширение набора выбранных элементов

Метод add() позволяет добавить в существующий объект jQuery дополнительные элементы. Различные варианты вызова этого метода приведены в таблице ниже:

Варианты вызова метода add()
Вариант вызова Описание
add(селектор),
add(селектор, контекст)
Добавляет в текущий набор дополнительные элементы, соответствующие селектору, без учета и с учетом контекста
add(HTMLElement),
add(HTMLElement[])
Добавляет в текущий набор элемент или массив элементов HTMLElement
add(jQuery) Добавляет в текущий набор содержимое указанного объекта jQuery

Подобно многим методам jQuery, метод add() возвращает объект jQuery, который можно использовать для вызова других методов, в том числе и для последующих вызовов метода add(). Пример использования метода add() для расширения ранее найденного набора приведен в ниже:

$(function() {
	var labelElems = document.getElementsByTagName("label");
		var jq = $('img[src*=daffodil]');
    
	$('img:even').add('img[src*=primula]').add(jq)
		.add(labelElems).css("border", "thick double red");
});

В этом сценарии для добавления элементов в первоначальный набор используются три подхода: с помощью другого селектора, с помощью объектов HTMLElement и с помощью другого объекта jQuery. Построив нужный набор объектов, мы вызываем метод css(), устанавливая для их свойств border значения, обеспечивающие окружение надписей рамками, прорисованными толстыми двойными линиями, как показано на рисунке:

Расширение набора элементов с помощью метода add()

Сужение набора выбранных элементов

Существует ряд методов, позволяющих удалять элементы из существующего набора. Их краткое описание приведено в таблице ниже. Каждый из этих методов возвращает новый объект jQuery, содержащий урезанный набор элементов. Объект jQuery, для которого вызывается метод, остается неизменным:

Методы фильтрации элементов
Метод Описание
eq(индекс) Исключает из набора все элементы, кроме элемента с указанным индексом
filter(условие) Исключает из набора элементы, не соответствующие указанному условию. Подробное описание допустимых типов аргументов приводится далее
first() Исключает из набора все элементы, кроме первого
has(), has(jQuery),
has(HTMLElement),
has(HTMLElement[])
Исключает из набора элементы, у которых отсутствуют потомки, соответствующие указанному селектору или объекту jQuery, или потомки, не включающие указанные Объекты HTMLElement
last() Исключает из набора все элементы, кроме последнего
not(условие) Исключает из набора все элементы, соответствующие указанному условию
slice(начало, конец) Исключает из набора все элементы, индексы которых выходят за пределы указанного диапазона

Сужение набора до одного элемента

Простейшими методами, с помощью которых можно сократить набор выбранных элементов, являются методы first(), last() и eq(). Эти три метода позволяют выбрать конкретный элемент на основании его позиции в наборе элементов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:

$(function() {
	
	var jq = $('label');
            
	// выбор первого элемента и воздействие на него 
	jq.first().css("border", "thick double red");
            
	// выбор последнего элемента и воздействие на него 
	jq.last().css("border", "thick double green");
            
	// выбор элемента с указанным индексом и воздействие на него
	jq.eq(2).css("border", "thick double black");
	jq.eq(-2).css("border", "thick double black");
	
});

Обратите внимание, что метод eq() вызывается дважды. Если аргумент имеет положительное значение, отсчет индексов начинается с первого элемента в наборе, содержащемся в объекте jQuery. В случае отрицательного значения аргумента индексы отсчитываются в обратном направлении, начиная с последнего элемента. Результат работы сценария приведен на рисунке:

Сужение набора элементов до одного заданного элемента

Сужение набора до элементов, индексы которых принадлежат к заданному диапазону

Если необходимо оставить в выбранном наборе лишь элементы, индексы которых принадлежат к заданному диапазону, используется метод slice(). Соответствующий пример приведен ниже:

$(function() {
	
	var jq = $('label');
            
	jq.slice(0, 2).css("border", "thick double black");
	jq.slice(4).css("border", "thick solid red");
	
});

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

Если второй аргумент опущен, то выбор элементов продолжается до конца существующего набора. Следовательно, использованию единственного аргумента 4 для набора из шести элементов соответствует выбор последних двух элементов (с индексами 4 и 5). Результат представлен на рисунке:

Сужение набора выбранных элементов на основе индексов

Фильтрация элементов

Метод filter() позволяет задать условие. Элементы, не удовлетворяющие заданному условию, исключаются из набора. Возможные варианты использования метода filter(), соответствующие различным способам задания условия, описаны в таблице ниже:

Варианты вызова метода filter()
Вариант вызова Описание
filter(селектор) Исключает из набора элементы, которые не соответствуют указанному селектору
filter(HTMLElement) Исключает из набора все элементы, кроме указанного
filter(jQuery) Исключает из набора все элементы, которые не содержатся в указанном объекте jQuery
filter(function(index)) Указанная функция вызывается для каждого элемента набора; из набора исключаются все элементы, для которых функция возвращает значение false

Пример использования всех четырех вариантов задания аргументов метода filter() приведен ниже:

$(function() {
	
    // выборка элементов, в значении атрибута src которых 
	// содержится строка 'astor'
    $('img').filter('[src*=astor]').css("border", "thick double red");
    
    // выборка элементов, содержащих строку 'daffodil'
    var jq = $('[for*=daffodil]');
    $('label').filter(jq).css("color", "blue");
    
    // выборка элементов, являющихся указанным элементом
    var elem = document.getElementsByTagName("label")[1];
    $('label').filter(elem).css("font-size", "1.5em");
    
    // фильтрация элементов с использованием функции
    $('img').filter(function(index) {
        return this.getAttribute("src").indexOf("peony.png") > -1 || index == 5;
    }).css("border", "thick solid red")
	
});

Первые три методики не нуждаются в особых пояснениях. Фильтры в них определяются с помощью селектора, другого объекта jQuery и объекта HTMLElement. Четвертая методика, основанная на использовании функции, требует дополнительных пояснений.

Предоставляемая jQuery функция выполняется по одному разу для каждого элемента набора, содержащегося в объекте jQuery. Если эта функция возвращает true, то элемент, для которого она была вызвана, остается в наборе. Если же возвращаемым значением является false, то элемент удаляется из набора. Функция принимает единственный аргумент — индекс элемента, для которого она вызывается. Кроме того, переменная this устанавливается так, что она указывает на текущий обрабатываемый объект HTMLElement. В данном примере значение true возвращается в тех случаях, когда атрибут src или индекс элемента имеют указанные значения.

Метод not() работает аналогично методу filter(), но обращает процесс фильтрации. Возможные варианты вызова метода not(), аналогичны вызовам метода filter().

Сужение набора до элементов, имеющих определенных потомков

Метод has() можно использовать для того, чтобы оставить в наборе выбранных элементов только те из них, у которых есть определенные потомки, указываемые либо с помощью селектора, либо с помощью одного или нескольких объектов HTMLElement. Пример использования метода has() приведен ниже:

$(function() {
	
    $('div.dcell').has('img[src*=astor]').css("border", "thick solid red");
    
    var jq = $('[for*=p]');
    $('div.dcell').has(jq).css("border", "thick solid blue");
	
});

В этом сценарии из выбранного набора исключаются элементы, у которых отсутствуют определенные потомки. В первом случае, когда используется селектор, из набора удаляются элементы, не имеющие ни одного потомка img, атрибут src которого был бы равен astor. Во втором случае, когда используется объект jQuery, то же самое происходит с элементами, не имеющими ни одного потомка со значением атрибута for, содержащим букву р. Результат работы сценария показан на рисунке:

Использование метода has() для сужения выбранного набора элементов

Преобразование набора выбранных элементов

Метод map() обеспечивает гибкий способ использования одного объекта jQuery для создания другого. В качестве аргумента методу map() передается функция. Эта функция вызывается для каждого из элементов, входящих в исходный объект jQuery, а возвращаемые ею объекты HTMLElement включаются в результирующий объект jQuery.

Пример использования метода map() приведен ниже:

$(function() {
	
    $('div.dcell').map(function(index, elem) {
        return elem.getElementsByTagName("img")[0];
    }).css("border", "thick solid red");
    
    $('div.dcell').map(function(index, elem) {
        return $(elem).children()[1];
    }).css("border", "thick solid blue");
	
});

В этом сценарии выполняются две операции преобразования. Первая из них, в которой используется программный интерфейс DOM, возвращает первый из элементов img, встречающихся в каждом элементе набора. Вторая операция, в которой используются возможности объекта jQuery, возвращает первый элемент набора, содержащегося в объекте jQuery, который возвращается методом children() (этот метод возвращает дочерние узлы каждого из элементов, содержащихся в объекте jQuery).

Пример использования метода map()

Тестирование набора выбранных элементов

Чтобы выяснить, соответствует ли хотя бы один из выбранных элементов заданному условию, можно использовать метод is(). Возможные варианты использования метода is(), аналогичны методам фильтрации not() и filter().

Если в качестве аргумента передается функция, то jQuery вызывает эту функцию для каждого элемента в объекте jQuery, передавая ей индекс данного элемента в качестве аргумента и устанавливая переменную this так, чтобы она указывала на сам элемент. Пример использования метода is() приведен ниже:

$(function() {
	
    var isResult = $('img').is(function(index) {
        return this.getAttribute("src").indexOf("rose.png") != -1;
    });
    console.log("Результат: " + isResult);
	
});

В этом сценарии мы проверяем, содержит ли объект jQuery элемент со значением атрибута src, который включает строку 'rose.png'.

Возврат к предыдущему состоянию измененного набора выбранных элементов

В jQuery предусмотрено сохранение состояний выбранного набора элементов при его изменении путем вызова методов цепочки. Из этого обстоятельства можно извлечь выгоду с помощью двух методов, описанных в таблице ниже:

Методы развертывания стека выборок
Метод Описание
end() Выталкивает текущий выбранный набор из стека и возвращает предыдущий набор
andSelf() Добавляет предыдущий выбранный набор к текущему

Метод end() можно использовать для возврата предыдущего выбранного набора, что позволяет выбрать некоторые элементы, расширить или сузить его, выполнить некоторые операции, а затем вернуться к исходному набору, как показано в примере ниже:

$(function() {
	
    $('label').first().css("border", "thick solid blue")
        .end().css("font-size", "1.5em");
	
});

В этом сценарии мы начинаем с того, что выбираем все элементы label в документе. Далее мы сужаем выборку, вызывая метод first() (для получения первого подходящего элемента), а затем устанавливаем значение CSS-свойства border с помощью метода css().

Следующим вызывается метод end() для возврата предыдущего выбранного набора (в результате чего вам вновь предоставляются все элементы label, а не только первый), а затем опять вызывается метод css(), на этот раз для установки значения свойства font-size. Результат выполнения сценария показан на рисунке:

Использование метода end()

Метод andSelf() добавляет содержимое предыдущего выбранного набора, находящегося в стеке, к текущему набору. Пример использования метода andSelf() приведен ниже:

$(function() {
	
    $('div.dcell').children('img').andSelf().css("border", "thick solid blue");
	
});

В этом примере сначала выбираются все элементы div с классом dcell, а затем — все элементы img, которые являются их дочерними элементами, для чего используется метод children(). После этого вызывается метод andSelf(), который объединяет предыдущую выборку (элемент div) с текущей (элементы img) в одном объекте jQuery. Наконец для создания рамок вокруг выбранных элементов вызывается метод css(). Результат выполнения сценария показан на рисунке:

Использование метода andSelf()
Пройди тесты