Question

我有以下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识别它需要隐藏的列表项，但我找不到它。我可以获得一些见解吗？

Answer 1

<li>标记内无<a>个标记。

尝试这样做

<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;
}

Answer 2

您应该首先在<a>代码中移动<li>代码。

Answer 3

尽管您的HTML无效（锚点不能是来自<ul>的直接子节点），但您需要解决anchor个节点才能使其正常工作。

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

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

Answer 4

li标记内无a个标记。反向将工作有看下面的片段。

$(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，允许的父母是=＆gt; ul，ol和菜单

这里是w3文档的参考link

Answer 5

这里不需要使用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 */

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

5 个答案: