Today i have experience difficulty to target specific sub element in my html document. So i would like to share my solution that i have.
The problem is how to append text on the third sub element under div with class content.?
From the above solution, basically telling that you can target specific sub element using "eq(2)" --> 2 is the index with no 2 . (Remember index start with 0) .
Example HTML :
1: <div class="content">
2: <span>element one</span>
3: <span>element two</span>
4: <span>element three</span>
5: <span>element four</span>
6: </div>
The problem is how to append text on the third sub element under div with class content.?
Below is my solution :
1: <script>
2: $(document).ready(function () {
3: $(".content span:eq(2)").append(" <b>content three append using jquery</b><br/>");
4: });
5: </script>
From the above solution, basically telling that you can target specific sub element using "eq(2)" --> 2 is the index with no 2 . (Remember index start with 0) .
Full Code Example :
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title></title>
5: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
6: </head>
7: <body>
8: <div class="content">
9: <span>element one</span>
10: <span>element two</span>
11: <span>element three</span>
12: <span>element four</span>
13: </div>
14: <script>
15: $(document).ready(function () {
16: $(".content span:eq(0)").append(" <b>content one append using jquery</b><br/>");
17: $(".content span:eq(1)").append(" <b>content two append using jquery</b><br/>");
18: $(".content span:eq(2)").append(" <b>content three append using jquery</b><br/>");
19: $(".content span:eq(3)").append(" <b>content four append using jquery</b><br/>");
20: });
21: </script>
22: </body>
23: </html>
