javascript - 改变所有 previous sibling 姐妹和堂 sibling

Question

在下面的示例中，我试图获取所有 <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');
});

但我真的很难让它为以前的堂兄弟工作。

Answer 1

你可以这样做:

$(document).ready(function(){
    $('.current').prevAll('li').andSelf().css('background','tomato');
    $('.current').closest('div').prevAll('div').find('li').css('background','tomato');
});

这是一个fiddle演示它。