Menu
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
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>
409
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
Definition and Usage. The :nth-child(n) selector selects all elements that are the nth child, regardless of type, of their parent. Tip: Use the :nth-of-type() selector to select all elements that are the nth child, of a particular type, of their parent.
The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic. Let's use our example from above but apply nth-of-type instead.
Your selector should be the following in order to address your second div inside the list tag!!
$('#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.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
