Jquery嵌套在选项卡式内容UL LI列表中的LI元素

Jquery nested LI elements inside tabbed content UL LI list

本文关键字：LI UL 列表 元素 嵌套 选项 Jquery      更新时间：2023-09-26

我在我的页面上使用选项卡式内容（参见我的FIDDLE）

现在，选项卡式内容使用<ul><li>元素来显示不同的选项卡。在其中一个选项卡中，我想添加一个<ul><li>列表，但我怀疑该列表没有正确显示，因为：

  1. jquery正在影响它
  2. 它嵌套在另一个li元素中

知道我该怎么解决吗？

请看fiddle以完全理解我的问题

您可以使用>子选择器来细化选择器，以仅匹配<ul id="tab">:下的<li>元素

 ul#tab > li {
     display: none;
 }
 ul#tab > li.active {
     display: block;
 }

 $("ul#tab > li:nth-child(" + nthChild + ")").addClass("active");

https://jsfiddle.net/63og0jue/

如果没有>，选择器将匹配<ul id="tab">:的任何<li>后代

<ul id="tab">
    <li><!-- ... --></li>
    <li>
        <!-- ... -->
            <li>one</li>
            <li>Two</li>
            <li>THree</li>
        <!-- ... -->
    </li>
    <li><!-- ... --></li>
</ul>

例如，ul#tab li:nth-child(1)将这两者都匹配为各自父母的第一个孩子：

<li>one</li>

<li>
    <p>HI There Enter personal Info</p>
</li>

影响li的样式被定义为影响#tab容器中的所有li。您可以将直接子代选择器（>）添加到选项卡菜单的css样式中，这样这些样式就不会影响其他li的

 ul#tabs {
     list-style-type: none;
     padding: 0;
     text-align: center;
 }
 ul#tabs>li {
     display: inline-block;
     background-color: #32c896;
     border-bottom: solid 5px #238b68;
     padding: 5px 20px;
     margin-bottom: 4px;
     color: #fff;
     cursor: pointer;
 }
 ul#tabs>li:hover {
     background-color: #238b68;
 }
 ul#tabs>li.active {
     background-color: #238b68;
 }
 ul#tab {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 ul#tab>li {
     display: none;
 }
 ul#tab>li.active {
     display: block;
 }

此外，还有一些方法可以从列表中提取文本和html：

// takes out only child html code without ul-children
jQuery.fn.justlihtml = function() {
    return $(this)  .clone()
            .children()
            .remove("ul")
            .end()
            .html();
};
// takes out only text without tags
jQuery.fn.justtext = function() {
    return $(this)  .clone()
            .children()
            .remove("ul")
            .end()
            .text();
};
var litext = $(element).justtext();
var lihtml = $(element).justlihtml();
相关文章：