javascript - 更改父级的兄弟类

Question

我在 HTML 中有这段代码，需要用 CSS 为一些祖先兄弟添加样式(可能无法)。因此，我使用 Javascript 为祖先添加类。

我读到你can not create a parent selector使用 CSS。

来自这里:

    <ul class="monitor">      <li><span>Servidor 1</span>        <ul>          <li><span>Hardware</span>            <ul>              <li>CPU</li>              <li>Memoria</li>              <li>Disco</li>            </ul>          </li>          <li><span>Airviro</span>            <ul>              <li class="warning">AVDBM</li>              <li>COLDB</li>            </ul>          </li>        </ul>      </li>      <li><span>Servidor 2</span>        <ul>          <li><span>Hardware</span>            <ul>              <li class="error">CPU</li>              <li class="warning">Memoria</li>              <li>Disco</li>            </ul>          </li>          <li><span>Airviro</span>            <ul>              <li>AVDBM</li>              <li>COLDB</li>            </ul>          </li>        </ul>      </li>    </ul>

对此:

    <ul class="monitor">      <li><span class="warning">Servidor 1</span>        <ul>          <li><span>Hardware</span>            <ul>              <li>CPU</li>              <li>Memoria</li>              <li>Disco</li>            </ul>          </li>          <li><span class="warning">Airviro</span>            <ul>              <li class="warning">AVDBM</li>              <li>COLDB</li>            </ul>          </li>        </ul>      </li>      <li><span class="error">Servidor 2</span>        <ul>          <li><span class="error">Hardware</span>            <ul>              <li class="error">CPU</li>              <li class="warning">Memoria</li>              <li>Disco</li>            </ul>          </li>          <li><span>Airviro</span>            <ul>              <li>AVDBM</li>              <li>COLDB</li>            </ul>          </li>        </ul>      </li>    </ul>

有什么优雅的解决方案吗？

Answer 1

首先是一些考虑:

1.

add classes to some ancestor siblings with CSS

这没有任何意义，您不使用 CSS 添加类，而是设置它们的样式。

2.

我知道您希望创建一棵树，如果子元素具有 .waring 或 .error 类，那么您希望其父元素也具有相同的类。这可能是为了让每个树步骤的文本变成黄色/红色。所以你的问题不仅仅是如何解决所有的 parent 并给他们添加一个类(class)，还有如何正确地设计他们的风格

这是我的成果

您的原始 HTML

<ul class="monitor">
  <li><span>Servidor 1</span>
    <ul>
      <li><span>Hardware</span>
        <ul>
          <li>CPU</li>
          <li>Memoria</li>
          <li>Disco</li>
        </ul>
      </li>
      <li><span>Airviro</span>
        <ul>
          <li class="warning">AVDBM</li>
          <li>COLDB</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><span>Servidor 2</span>
    <ul>
      <li><span>Hardware</span>
        <ul>
          <li class="error">CPU</li>
          <li class="warning">Memoria</li>
          <li>Disco</li>
        </ul>
      </li>
      <li><span>Airviro</span>
        <ul>
          <li>AVDBM</li>
          <li>COLDB</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

这里有一些额外的 CSS

.monitor{
    color:#00aa00;
}
.warning{
    color:#ffaa00;
}
.error{
    color:#ff0000;
}
// Notice the rule under here makes everything not warning or error green.
// Try the fiddle without this and you'll see why it's needed
li:not(.warning):not(.error){
    color:#00aa00;
}

最后一些 JQUERY

// Select all items with warning class
$('.warning').each(function(){
    // for each item select all its parents which are li|ul
    $(this).parents('li, ul').each(function(){
        // for each parent clear all its classes
        $(this).removeClass()
        // then add the warning class
        $(this).addClass('warning')

    })
})
// same for erro AFTER WARNING as it is more relevant
// and should override the warning color
$('.error').each(function(){

    $(this).parents('li, ul').each(function(){

        $(this).removeClass()
        $(this).addClass('error')

    })
})

希望这对您有所帮助。 HERE IS A WORKING FIDDLE

编辑

考虑到@Jeremy 的评论，jQuery 可能会变成

// Select all items with warning class
$('.warning').each(function(){
    // for each item select all its parents which are li|ul
    $(this).parentsUntil('.monitor', 'li, ul').each(function(){
        // for each parent clear all its classes
        $(this).removeClass()
        // then add the warning class
        $(this).addClass('warning')

    })
})
// same for erro AFTER WARNING as it is more relevant
// and should override the warning color
$('.error').each(function(){

    $(this).parentsUntil('.monitor', 'li, ul').each(function(){

        $(this).removeClass()
        $(this).addClass('error')

    })
})

注释:

• 选择“li, ul”而不是“span”
• .parentsUntil('.monitor', 'li, ul')，第一个元素告诉什么时候停止，第二个元素告诉选择哪些元素。

HERE THE UPDATED FIDDLE