将第n个子项隐藏在链接标记内

Hiding nth child inside link tag

本文关键字：链接 隐藏 将第      更新时间：2024-02-21

我有以下HTML和JS

<div class = "tab-menu">
    <ul class = "tabs">
        <a><li>List item 1</li></a>
        <a><li>List item 2</li></a>
        <a><li>List item 3</li></a>
    </ul>
</div>

列表项位于a标记中，因此可以单击整个列表项。在特定条件下，我尝试使用jQuery来隐藏某些列表项。在我把它们都包在标签里之前，效果很好，但现在我无法把它们藏起来。

jQuery(".tab-menu .tabs > li:nth-child(3)").hide();

我已经尝试了我能想到的每一种变体，让JS识别出它需要隐藏的列表项，但我找不到。我能得到一些见解吗？

在<a>标记中不能有<li>标记。

试着做这个

<ul>
    <li><a href="">List item 1</a></li>
    <li><a href="">List item 2</a></li>
    <li><a href="">List item 3</a></li>
</ul>

如果您希望链接的行为像块元素，请添加以下css

a {
    display: block;
}

您应该首先将<a>标记移动到<li>标记中。

尽管HTML无效（锚点不能是来自<ul>的直接子节点），但您需要寻址anchor节点才能实现这一点。

jQuery(".tab-menu .tabs > a:nth-child(3)").hide();

但无论如何，这只是纯粹的理论。即使这可能有效，也需要将元素的顺序固定到<li><a>中。

此处无需使用jQuery。一旦你清理了HTML语法，你就可以使用CSS隐藏列表中的项目，如下所示：

ul > li:first-child {display: none;} /* hides first child */
ul > li:nth-child(2) {display: none;} /* hides the nth-child [in this case, the second child] */
ul > li:last-child {display: none;} /* hides the last child */

在a标记中不能有li标记。反向将在那里工作，看看下面的片段。

$(function(){
  jQuery(".tab-menu .tabs > li:nth-child(3)").hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "tab-menu">
    <ul class = "tabs">
        <li><a>List item 1</a></li>
        <li><a>List item 2</a></li>
        <li><a>List item 3</a></li>
    </ul>
</div>

根据w3.org允许的li的父项是=>ul、ol和菜单

这是w3文档的参考链接

相关文章：