使用 jquery 将类添加到 nth-child答案

【问题标题】：add class to nth-child with jquery使用 jquery 将类添加到 nth-child
【发布时间】：2017-08-29 18:58:40
【问题描述】：

我正在尝试将一个使用 jquery 的类添加到第 n 个孩子，以便它可以在 IE 中工作。它似乎不起作用，我遵循了一些没有结果的例子。我已经链接了小提琴

<div id='tasklist'>
    <ul class='header'>
        <li>
            <div class='listitem head'>Number</div>
            <div class='listitem head'>Description</div>
            <div class='listitem head'>Start Date</div>
            <div class='listitem head'>Due Date</div>
            <div class='listitem head'>Edit/View</div>
            <div class='listitem head'>Complete</div>
        </li>
    </ul>
</div

 #tasklist ul {
clear:both;
list-style:none;
margin:0;
padding:0;
}
 #tasklist ul li {
clear:both;
margin:3px;
padding:3px;
}
 .listitem {
float:left;
display:inline-block;
}
 .listitem2 {
width:400px;
}

    $( document ).ready(function() {
        $('#tasklist ul li:nth-child(2)').addClass("listitem2");
    });


 <head>
    <link href='css/style.php' type='text/css' rel='stylesheet'>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie_style.css" />
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        $('.listitem:nth-child(2)').addClass("listitem2");
    });
</script>
 </head>

【问题讨论】：

您的 Fiddle 中没有包含 jQuery 库。你自己的代码有同样的问题吗？此外，您甚至没有第二个li 标签。你怎么知道它不起作用？
你测试的是哪个版本的IE？
当我添加更多 <li> 并包含 jQuery -- jsfiddle.net/XghbU/1 时工作正常
我使用的是 IE9。这是我完整的代码。

标签： jquery html css css-selectors

【解决方案1】：

您的选择器应如下所示，以便在列表标签内处理您的第二个 div！

$('#tasklist ul li div:nth-child(2)')

或者，如果您实际上试图定位一个列表元素，那么您应该在标记中列出两个列表元素。

【讨论】：

我试过了。当我在 Chrome 中检查它时，它正在工作并且它添加了 listitem2 类就好了。但是，它不会在 IE9 中执行此操作。
看来我必须将添加到我的 index.php 中。这似乎已经解决了。
应该！再试一遍。 IE8 不支持 nth-child 选择器，但 IE9 应该支持。除此之外，您的选择器正试图定位一个不存在的列表标签。祝你好运！ :)

【解决方案2】：

 jQuery(".menu-item").click(function(){
        jQuery(this).find('ul.sub-menu').toggleClass("display_both");
    });

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些即时帮助。一个正确的解释would greatly improve 其教育价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有类似但不相同的问题的读者更有用。请edit您的答案添加解释，并说明适用的限制和假设。