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>
0 comments:
Post a Comment