Question

我在HTML中使用此代码，并且需要使用CSS为某些祖先兄弟添加样式（可能无法）。因此，我使用Javascript向祖先添加类。

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

从此：


    <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

使用CSS
为一些祖先兄弟添加类

这并不意味着什么，你不用CSS添加类，你可以设置它们的样式。

2

我理解你希望创建一个树，如果一个子元素有.waring或.error类，那么你希望它的父类也能得到同一个类。这可能是因为您可以为每个树步骤使文本为黄色/红色。所以你的问题不仅仅是如何解决父母的问题并为他们添加一个类，还有如何正确地设置他们的样式

这是我出来的

您的原始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

修改

Fallow @ 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

Answer 2

这样的事可能适合你：

$(this).parentsUntil('span', '.monitor').addClass('warning');

这将找到“span”类型的所有祖先，直到最近的元素与“monitor”类，并为每个元素添加“warning”类。

如果没有关于您尝试解决的问题的更多信息，很难确定这对您有用。

更改父级的兄弟级别

2 个答案:

1

2

这是我出来的

修改