使用jquery向nth-child添加类

时间:2022-08-22 13:50:53

I'm trying to add a class using jquery to the nth-child so that it'll work in IE. It doesn't seem to be working, I have followed a few examples with no results. I have linked the fiddle

我想在nth-child中添加一个jquery类,这样它就可以在IE中工作了。这似乎行不通,我已经看了几个没有结果的例子。我把小提琴连起来了

http://jsfiddle.net/aosto/XghbU/

http://jsfiddle.net/aosto/XghbU/

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

2 个解决方案

#1


4  

Your selector should be the following in order to address your second div inside the list tag!!

您的选择器应该是以下,以便在列表标签中找到第二个div !

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

Or any case you should have at list two list elements in your markup if you are actually trying to target a list element.

或者你在标记中列出两个列表元素的任何情况,如果你想要针对一个列表元素。

#2


0  

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

#1


4  

Your selector should be the following in order to address your second div inside the list tag!!

您的选择器应该是以下,以便在列表标签中找到第二个div !

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

Or any case you should have at list two list elements in your markup if you are actually trying to target a list element.

或者你在标记中列出两个列表元素的任何情况,如果你想要针对一个列表元素。

#2


0  

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