Question

也许标题并没有真正说出我的问题。

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

我要做的是将背景颜色应用于具有“test”类的元素的相邻兄弟，并且其本身也是如此，其中三个将具有背景颜色。所以我必须做以下事情。

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

我认为这是一个非常难看的编码。有没有办法做$ $（prev，this，next）.somefunction（）谢谢

Answer 1

您可以使用.add()向匹配元素集添加元素：

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

或者使用.addBack()（.andSelf()用于1.8之前的jQuery版本）：

$(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")，但这对我不起作用

编辑：

$("li + .test")确实有效，但会选择.test元素。虽然

似乎没有先前的相邻选择器

希望这有帮助

Answer 5

好的，我想我可能会尝试用jQuery加入一些css练习并按照这种方式进行：

<强> CSS

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

<强>的jQuery

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

但我想知道自己是否有更清洁的解决方案。：）

如何将选择器“链接”在一起并在jQuery中应用相同的函数

5 个答案: