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>

我可以用

为所有以前的兄弟姐妹（但不是堂兄弟）做这件事

#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。

Answer 2

这是一个应该有效的例子：

$(document).ready(function() {
  $("#list-items li").each(function() {
    if ($(this).hasClass('current')) {
      $(this).prevAll("li").addClass('disable');
    }
  });
});

li:hover,
.current {
  text-decoration: underline;
  cursor: pointer;
  color: black;
}
.disable {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="list-items">
  <li>List item</li>
  <li>List item</li>
  <li class="current">Current item</li>
  <li>List item</li>
</ul>

修改：要包含当前的li使用：$(this).prevAll("li").andSelf().addClass('disable');

Answer 3

试试这个：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

改变所有以前的兄弟姐妹和以前的表兄弟

3 个答案: