prevAll()

.prevAll( [ селектор ])

Возвращает: jQuery

Описание: Возвращает всех предшествующих братьев каждого элемента во множестве соответствующих элементов, опционально отфильтрованых селектором.

.prevAll( [ селектор ] )

Добавлена в версию: 1.2

селектор

Строка

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

Данный объект jQuery представляет набор элементов DOM, метод .prevAll() позволяет нам искать среди предшественников этих элементов в дереве 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').prevAll().css('background-color', 'red');

Результатом этого вызова является красный фон для пункта 1 и 2. Так как мы не поставляем выражение выбора, эти предшествующие элементы будут однозначно включены в качестве части объекта. Если бы мы предоставили выражение выбора, элементы были бы протестированны на соответствие перед включением в объект.

Примеры

Пример 1

Определение всех элементов div перед последним и назначение им класса с именем before.

$("div:last").prevAll().addClass("before");

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE html>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("div:last").prevAll().addClass("before");
  });
  </script>

  <style>
  div { width:70px; height:70px; background:#abc; 
        border:2px solid black; margin:10px; float:left; }
  div.before { border-color: red; }
  </style>
</head>

<body>
  <div></div>
  <div></div>

  <div></div>
  <div></div>

</body>
</html>