在下面的示例中,我试图获取所有 <li>
之前(包括当前的 <li>
) class="current"
具有番茄背景色。
所以在这个例子中:1、2、3、4 和 5 的背景颜色是番茄。
如果 <li>
我需要它来更新那class="current"
正在改变。
<div id="container">
<div class="menu-1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="menu-2">
<ul>
<li>4</li>
<li class="current">5</li>
<li>6</li>
</ul>
</div>
<div class="menu-3">
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
我可以用
为所有 previous sibling 姐妹(但不是表亲)做这件事#container .current ~ li {
background-color:transparent;
}
或者使用 jQuery
$(document).ready(function(){
$('.current').prevAll('li').css('background','tomato');
});
但我真的很难让它为以前的堂兄弟工作。
最佳答案
你可以这样做:
$(document).ready(function(){
$('.current').prevAll('li').andSelf().css('background','tomato');
$('.current').closest('div').prevAll('div').find('li').css('background','tomato');
});
这是一个fiddle演示它。
关于javascript - 改变所有 previous sibling 姐妹和堂 sibling ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33850113/