Как сгруппировать селектор и применить ту же функцию в jQuery

Question

Может быть, название действительно не указывало, в чем мой вопрос.

<ul> 
    <li>A</li> 
    <li>B</li> 
    <li class="test">C</li> 
    <li>D</li> 
</ul> 

, что я пытаюсь сделать, это применить цвет фона для соседних сибсов элемента с классом «тестом», и сам по себе, а также, полностью три из них будет иметь цвет фона. , поэтому я должен сделать следующее.

$('ul li.test').each(function(){ 
     $(this).prev().css('background','red'); 
     $(this).css('background','red'); 
     $(this).next().css('background','red'); 
    }); 

, который, по моему мнению, является довольно уродливым кодированием. Есть ли способ сделать что-то вроде $ (пред, это рядом) .somefunction() спасибо

Answer 1

Вы можете использовать .add() для добавления элементов в наборе соответствующих элементов :

$(this).add($(this).prev()).add($(this).next()).css('background','red'); 

Или с .addBack() (.andSelf() для версии JQuery до 1.8):

$(this).prev().addBack().next().addBack().css('background','red'); 

Answer 2

использование .end()

$(this).prev().css('background','red') 
     .end().css('background','red') 
     .next().css('background','red'); 

Answer 3

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

var $this = $(this); 
var elements = $this; 
elements.add($this.prev()); 
elements.add($this.next()); 

elements.css('background','red'); 

Answer 4

Вы можете уплотнить их вместе с помощью Next Adjacent Selector

$(".test, .test + li").css("background-color","#F00"); 

Я также попытался попытался $("li + .test"), как хорошо, но это не работает для меня

Edit:

$("li + .test") не работает, но выбирает элемент .test. Там, кажется, не будет предыдущим смежным селектором хотя

Надеется, что это помогает

Answer 5

Хорошо, я думаю, я бы, возможно, попытаться присоединиться к некоторой CSS практики с JQuery и сделать это таким образом:

CSS

.test, 
.test + li { 
    background: red; 
} 

JQuery

$('.test').prev().css('background','red'); 

Но я удивляюсь, если есть более чистое решение. :)