Расширение выборки

Метод add позволяет расширить содержание объекта jQuery добавлением дополнительных элементов. В Таблице 6-2 показаны различные аргументы, которые можно использовать.

Таблица 6-2: Типы аргументов для метода add

Аргументы	Описание
`add(selector)` `add(selector, context)`	Добавляет все элементы, которые соответствуют селектору, с/без контекста
`add(HTMLElement)` `add(HTMLElement[])`	Добавляет один `HTMLElement` или массив `HTMLElement`
`add(jQuery)`	Добавляет содержание указанного объекта `JQuery`

Как и многие методы jQuery, метод add возвращает объект jQuery, для которого можно вызвать другие методы, включая последующий вызов метода add. В листинге 6-1 показано, как использовать метод add, чтобы расширить набор элементов.

Внимание
Ошибочно полагать, что метод remove является полной противоположностью метода add и что он сузит выборку. На самом деле метод remove менят структуру DOM, о чем я расскажу в главе 7. Используйте один из методов, которые я описываю в разделе "Сужение выборки".

Листинг 6-1: Использование метода add

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript">
		$(document).ready(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");
		});
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow">
					<div class="dcell">
						<img src="astor.png" /><label for="astor">Astor:</label>
						<input name="astor" value="0" required>
					</div>
					<div class="dcell">
						<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
						<input name="daffodil" value="0" required>
					</div>
					<div class="dcell">
						<img src="rose.png" /><label for="rose">Rose:</label>
						<input name="rose" value="0" required>
					</div>
				</div>
				<div id="row2" class="drow">
					<div class="dcell">
						<img src="peony.png" /><label for="peony">Peony:</label>
						<input name="peony" value="0" required>
					</div>
					<div class="dcell">
						<img src="primula.png" /><label for="primula">Primula:</label>
						<input name="primula" value="0" required>
					</div>
					<div class="dcell">
						<img src="snowdrop.png" /><label for="snowdrop">Snowdrop:</label>
						<input name="snowdrop" value="0" required>
					</div>
				</div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

Скрипт в этом примере использует все три способа добавления элементов в первоначальную выборку: при помощи другого селектора, при помощи некоторых HTMLElement объектов, при помощи другого jQuery объекта. Я создал свой набор объектов, вызвал метод css, чтобы указать значение свойства border для рисования толстой красной рамки, как показано на рисунке 6-1.

Рисунок 6-1: Расширение выборки при помощи метода add

6.2. Сужение выборки

или RSS канал: