定位在已识别标签之前的元素的背景颜色？答案

【问题标题】：background color to an element which is positioned before the identified tag?定位在已识别标签之前的元素的背景颜色？
【发布时间】：2012-01-30 13:38:04
【问题描述】：

我正在尝试为位于已识别标签之前的元素添加背景颜色。例如，我知道一个元素的类别，并且我有一个如下列表。

<ul id="one">
  <li><a href='#'>text0</a></li>
  <li><a href='#'>text1</a>
  <ul>
    <li><a href='#'>text2</a></li>
    <li><a href='#'>text3</a>
      <ul>
        <li class="item-1"><a href='#' class='identified'>item1</a></li>
        <li class="item-2"><a href='#'>item2</a></li>
        <li class="item-3"><a href='#'>item3</a></li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

如果我知道 class='identified' 我想改变 text1 的背景颜色，现在我想为第一级元素分配背景颜色我该怎么做才能完成这项工作。？

【问题讨论】：

您的代码是从here 复制的，这就是答案所在。你试过什么？
啊，它也在另一页。我会试试这个谢谢。

标签： jquery html css-selectors background-color drop-down-menu

【解决方案1】：

使用 jQuery closest 方法试试这个。

$('li.identified').closest('ul').closest('ul').prev().css('background', 'red');

.closest()参考：http://api.jquery.com/closest/

【讨论】：

【解决方案2】：

嗯，“text1”是属于“.identified”元素的第一个锚元素的父元素的父元素的父元素的父元素的父元素。所以你可以这样做：

$(".identified").parent().parent().parent().parent().parent()
                .children("a").css({"background-color" : "blue" });

（适当地修复实际的 CSS 更改，并仔细检查我是否正确计算了父母。）

但是上面的内容有点脆弱，因为它依赖于确切地知道有多少级别属于层次结构。如果您可以为所有顶级 li 元素分配一个类，例如“topMenu”类，那么您可以这样做：

$(".identified").closest(".topMenu")
                .children("a").css({"background-color":"blue"});

.closest() method 从当前元素向上遍历 DOM 树，直到找到与提供的选择器匹配的元素。

编辑：抱歉，您不需要添加类，我刚刚意识到您的标记中已经有足够的信息可以直接选择适当的祖先 li 元素：

$(".identified").closest("#one > li")
                .children("a").css({"background-color":"red"});

演示：http://jsfiddle.net/WVd8W/

【讨论】：