jQuery: получить предыдущий элемент минус 1

Question

Я хочу выбрать предыдущий элемент элемента с классом.

<ul>
  <li>1</li>
  <li>2</li>
  <li>Element I want</li>
  <li>4</li>
  <li class="selector">5</li>
</ul>

Насколько я понимаю, селектор .prev() получает только непосредственно предшествующего брата.

Итак, я попробовал следующее:

$("li>li").prev().css( "background-color", "red" );

Но это не работает. В этом списке всегда есть разное количество предметов. Так что я должен go задом наперед.

Answer 1

Есть несколько способов сделать это. Вы можете использовать prev().prev():

$(".selector").prev().prev().css("background-color", "red");

или prevAll().slice()

$('.selector').prevAll().slice(1, 2).css('background-color', 'red');

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

$('ul li:eq(3)').css('background-color', 'red');

Или, если цель всегда третья от конца, вы можете выбрать ее напрямую, используя :nth-last-child():

$('ul li:nth-last-child(3)').css('background-color', 'red');

Какой бы метод вы ни выбрали, не ' не используйте css(), поскольку это не очень хорошее разделение интересов (потому что оно связывает CSS и JS logi c вместе). Вместо этого используйте addClass().

//$(".selector").prev().prev().addClass('red');
//$('ul li:eq(3)').addClass('red');
//$('.selector').prevAll().slice(1, 2).addClass('red');
$('ul li:nth-last-child(3)').addClass('red');

.red { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>Element I want</li>
  <li>4</li>
  <li class="selector">5</li>
</ul>