jquery 以第一级为目标< li>,而不是嵌套< li>的

v8wbuo2f  于 2023-03-17  发布在  jQuery
关注(0)|答案(7)|浏览(161)

我有以下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> s时将字体加粗,但不需要将该字体样式应用于嵌套的<li> s(名称为 * subscartions *)。
如果您想使用它,这里有一个初始的jsfiddle DEMO
谢谢。

编辑--
解决方案:
儿童选择器,这就是答案。

不需要jQuery,这可以使用CSS完成。
这是更新后的DEMO

编辑--这里有一个more clear demo

谢谢你,

cgfeq70w

cgfeq70w1#

有一个包含类的容器<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.
}

注:>选择器在IE6及以下版本中作为CSS选择器使用时不起作用,但在所有其他浏览器中都起作用,包括IE7和IE8,在JQuery中使用时,它在jQuery支持的所有浏览器中都起作用,包括IE6。

zujrkrfu

zujrkrfu2#

你可以这样做:

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

但是最好给予顶层的<ul>一个ID,这样就可以使用有效的CSS选择器来定位它:

$('#topUL > li')
m0rkklqb

m0rkklqb3#

儿童选择器,这就是答案。

不需要jQuery,使用CSS就可以完成。使用选择器定位第一级li元素:

ul > li {
    font-weight: bold;
}

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

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

这是更新后的DEMO

kkih6yb8

kkih6yb84#

我将设置一个规则来针对所有li元素,然后设置另一个规则来覆盖针对嵌套li元素的规则。

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

嵌套的li元素将是正常的重量和顶级将是粗体。

7jmck4yq

7jmck4yq5#

我认为您的问题还没有完全解决(尽管已经有了一些很好的尝试),您的示例问题涉及将样式应用到父对象并防止子对象继承样式--这是一个CSS问题。
您可以通过了解父元素来定位列表项(正如一些人所指出的),然后在hover上添加一个类。

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

你的CSS应该有一个父类的类,和一个子类的否定样式:

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

lymnna716#

下面是用户@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>
9avjhtql

9avjhtql7#

这可以通过jQuery或CSS3使用:not()选择器检查列表的父列表来完成。
要防止CSS属性继承,您可以使用<span><div> Package 项目的内容。

:not(li) > ul > li > span {
  color: green;
}
<ul>
  <li><span>Level 1</span></li>
  <li><span>Level 1</span>
    <ul>
      <li><span>Level 2</span></li>
      <li><span>Level 2</span>
        <ul>
          <li><span>Level 3</span></li>
          <li><span>Level 3</span></li>
        </ul>
      </li>
      <li><span>Level 2</span></li>
    </ul>
  </li>
  <li><span>Level 1</span></li>
</ul>

注意,这个方法只有在元素直接嵌套的情况下才有效(即使用子组合子(>)),否则:not()将总是匹配随机祖先。

相关问题