Question

我有以下HTML：

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

使用jQuery，我如何定位<li>的第一级？

例如，我需要将字体悬停在带有字母A，B和C的<li>上，但不要将该字体样式应用于嵌套<li> s（带有名称子部分）。

如果你想使用它，这是一个初始的jsfiddle DEMO。

感谢。

修改 -

解决方案：

儿童选择，这就是答案。

不需要jQuery，这可以使用CSS完成。

这是更新后的DEMO

编辑 - 这是 more clear demo

谢谢，

Answer 1

拥有一个带有类的容器<div>，并使用>选择器。让我们说你的容器div的类是“myclass”：

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

注意：>选择器在用作CSS选择器时在IE6及以下版本中不起作用。它可以在所有其他浏览器中工作，包括IE7和IE8，当在JQuery中使用时，它适用于jQuery支持的所有浏览器，包括IE6。

Answer 2

你可以这样做：

$('ul > li:not(:has(ul))');

但最好为您的顶级<ul>提供一个ID，以便您可以使用有效的CSS选择器来定位它：

$('#topUL > li')

Answer 3

儿童选择，这就是答案。

不需要jQuery，这可以使用CSS完成。使用选择器定位第一级li元素：

ul > li {
    font-weight: bold;
}

然后撤消更深层li元素的样式：

ul > li li {
    font-weight: normal;
}

这是更新的DEMO。

Answer 4

我会设置一个规则来定位所有li元素，然后设置另一个规则以覆盖嵌套li元素的目标。

li{font-weight:bold;}
ul ul li{font-weight:normal;}

嵌套的li元素为正常权重，顶级为粗体。

Answer 5

我认为你的问题没有得到完全解决（尽管有一些很好的尝试）。您的示例问题涉及将样式应用于父级并阻止子级继承该样式 - 这是一个CSS问题。

您可以通过了解父元素来定位列表项（正如一些人已经注意到的那样）。然后在悬停时添加一个类。

$('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

你的CSS将拥有父级的类，以及孩子的否定风格：

.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }

Answer 6

这是用户@Spudley的答案的扩展版本-带有摘要。

可能会节省一些时间。

/* this will affect all levels of li */
.myclass ul li {
  color: red;
}


/* this will only affect level 1 */
.myclass>ul>li {
  color: green;
}


/* this will only affect level 2 */
.myclass>ul>li>ul>li {
  color: blue;
}


/* this will only affect level 3 */
.myclass>ul>li>ul>li>ul>li {
  color: aqua;
}


* {
  font-family: arial;
}

<div class="myclass">
  <ul>
    <li>Level 1
      <ul>
        <li>Level 2
          <ul>
            <li>Level 3</li>
            <li>Level 3</li>
          </ul>
        </li>
        <li>Level 2</li>
        <li>Level 2
          <ul>
            <li>Level 3</li>
            <li>Level 3</li>
            <li>Level 3
              <ul>
                <li>Level 4</li>
                <li>Level 4</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Level 1</li>
  </ul>
</div>

定位第一级<li>而不是嵌套</li> <li> s </li>

6 个答案: