Today, We want to share with you How to get nth-child Selector using Jquery.In this post we will show you nth-child equivalent in javascript or jquery, hear for ffffffffffffffff we will give you demo and example for implement.In this post, we will learn about How to pick the nth child in jquery? with an example.
How to get nth-child Selector using Jquery
There are the Following The simple About How to Use jQuery Children and Find jQuery Child Full Information With Example and source code.
As I will cover this Post with live Working example to develop JQuery – Select First, Last, Nth, Second Children, so the jquery selector multiple nth child is used for this example is following below.
Simple Jquery nth-child Selector Example
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
var value = $(this).val();
$("ul li").css("background-color","#ff9900")
$("ul li").animate({'marginLeft' : "5px"});
var last_elements = $('ul li'+value);
last_elements.css("background-color","#DD4B39");
last_elements.animate({'marginLeft' : "+=20px"});
});
});
</script>
<style>
ul{
font-family: monospace;
font-size: 15px;
font-family: monospace;
font-style: normal;
font-size-adjust: none;
width:200px;
}
ul li{
background-color:#ff9900;
margin:5px;
padding:5px;
list-style-type:none;
}
</style>
</head>
<body>
<h1>simple Jquery nth-child() Selector Example - TamilRokers</h1>
<div>
<div style="float:left;">
<ul>
<li>PHP</li>
<li>Laravel</li>
<li>Angularjs</li>
<li>vuejs</li>
<li>jquery</li>
<li>Javascript</li>
<li>Magento</li>
<li>Shopify</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
<div style="float:left;">
<ul>
<li>PHP</li>
<li>Laravel</li>
<li>Angularjs</li>
<li>vuejs</li>
<li>jquery</li>
<li>Javascript</li>
<li>Magento</li>
<li>Shopify</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
<div style="clear:both;">
<button value=":nth-child(2)">:nth-child(2)</button>
<button value=":nth-child(3n)">:nth-child(3n)</button>
<button value=":nth-child(even)">:nth-child(even)</button>
<button value=":nth-child(odd)">:nth-child(odd)</button>
</div>
</div>
</body>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Get second child using jQuery Example with Demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.