Описание: Возвращает непосредственно предшествующего брата каждого элемента во множестве соответствующих элементов, опционально отфильтрованых селектором.
.prev( [ селектор ] )
Добавлена в версию: 1.0
селектор
Строка, содержащая выражение для выбора соответствующих элементов.
Данный объект jQuery представляет набор элементов DOM, метод
.prev() позволяет нам искать среди предшественников этих элементов в дереве DOM и создать новый объект jQuery из соответствующих элементов.
Метод опционально принимает выражение выбора того же типа, что мы можем передать в функцию $(). Если селектор представлен, элементы будут отфильтрованны тестрированием на соответствие ему.
Рассмотрим страницу с простым списком:
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
Если мы начнем с третьего пункта, мы можем найти элемент, который находится сразу перед ним:
$('li.third-item').prev().css('background-color', 'red');
Результатом этого вызова является красный фон для пункта 2. Так как мы не поставляем выражение выбора, этот предшествующий элемент будет однозначно включен в качестве части объекта. Если бы мы предоставили выражение выбора, элемент был бы протестирован на соответствие перед включением в объект.
Примеры
Пример 1
Поиск ближайшего предыдущего родственного элемента для каждого элемента div.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ var $curr = $("#start"); $curr.css("background", "#f99"); $("button").click(function () { $curr = $curr.prev(); $("div").css("background", ""); $curr.css("background", "#f99"); }); }); </script> <style> div { width:40px; height:40px; margin:10px; float:left; border:2px blue solid; padding:2px; } span { font-size:14px; } p { clear:left; margin:10px; } </style> </head> <body> <div></div> <div></div> <div><span>has child</span></div> <div></div> <div></div> <div></div> <div id="start"></div> <div></div> <p><button>Go to Prev</button></p> </body> </html>
Пример 2
Поиск ближайшего предыдущего родственного элемента каждого параграфа (предыдущий элемент перед параграфом), который имеет класс “selected”.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").prev(".selected").css("background", "yellow"); }); </script> </head> <body> <div><span>Hello</span></div> <p class="selected">Hello Again</p> <p>And Again</p> </body> </html>
Была ли эта информация полезной?
