4

也许标题并没有真正说明我的问题是什么。

<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() 谢谢

4

5 回答 5

2

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

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

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

$(this).prev().addBack().next().addBack().css('background','red');
于 2013-03-26T22:50:04.140 回答
1

利用.end()

$(this).prev().css('background','red')
       .end().css('background','red')
       .next().css('background','red');
于 2013-03-26T22:48:42.967 回答
0

您可以创建一个变量来缓存选择并对其应用样式。

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

elements.css('background','red');
于 2013-03-26T22:51:03.287 回答
0

您可以使用Next Adjacent Selector将其中两个压缩在一起

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

我也试过$("li + .test")了，但这对我不起作用

编辑：

$("li + .test")确实有效，但它选择了.test元素。虽然似乎没有以前的相邻选择器

希望这可以帮助

于 2013-03-26T22:57:44.703 回答
0

好的，我想我可能会尝试使用 jQuery 加入一些 css 练习并这样做：

CSS

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

jQuery

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

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

于 2013-03-26T23:09:19.007 回答