Using jQuery to select specific child elements…

Series: jQuery Basics, Selectors and Child Elements, Step Three.

One of the main reasons I turned to jQuery was the ease of selecting elements of the pages I was writing. I found myself not only needing to grab form field data, but also specific items out of my lists and tables. jQuery makes it simple to dig into your lists and grab out a specific list item’s information. Let’s take a look.

First let’s take a look at the list that you’re going to be selecting from.

<div id="mydiv">
    <ul id="mylist">
        <li>This is first</li>
        <li>This is second</li>
        <li>This is third</li>
        <li>This is forth</li>
        <li>This is fifth</li>
    </ul>
</div>

Something to keep in mind when selecting elements. Most of the time in programming, you start at 0 for your element positions. Arrays, Object, etc. With selecting out elements, you start at 1.

$("ul li:nth-child(4)").html();

This is the basis of the select. You’re simply grabbing the nth-child. n = number, giving you 4th. The 4th child in the ul.

For the purpose of this tutorial, we’re going to attach the selection of the nth-child to a button, set a click event, and display the value of the li in its own div.

$('#childdiv').html( $("ul li:nth-child(4)").html() );

What you see here is we’re setting the empty div to the value of the 4th child. Additionally, you could use an append() function or any other “insert” type jQuery function.

$(document).ready( function(){
    $("#getchild").click( function() {
        $('#childdiv').html( $("ul li:nth-child(4)").html() );
    });
});

Here’s our complete click event setup and ready for implementation. Let’s put this together in a working model.

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Select Element</title>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

        <style type="text/css">

        #mydiv
        {
            border: 1px solid black;
        }
        
        #childdiv
        {
            margin: 10px 0;
            border: 1px solid black;
        }

        </style>

        <script language="JavaScript">

        $(document).ready( function(){
            $("#getchild").click( function() {
                $('#childdiv').html( $("ul li:nth-child(4)").html() );
            });
        });

        </script>
        
    </head>
    
    <body>
        
        <div id="mydiv">
            <ul id="mylist">
                <li>This is first</li>
                <li>This is second</li>
                <li>This is third</li>
                <li>This is forth</li>
                <li>This is fifth</li>
            </ul>
        </div>

        <div id="childdiv">

        </div>

        <div id="event">

            <input type="button" id="getchild" value="Select" />

        </div>
        
    </body>
</html>

Here we’ve setup a series of divs. The first contains your ul. The second is where the result of your select will display. The third simply holds your button to do fire off the select. You’ll see your jQuery code up in the head area, waiting for the document to finish loading, attaching a click event to your button, and waiting for you to click the button. Click on that button, and you’ll see your childdiv populate with the child you selected your code.

Play around a bit with the number 4. Modify your list a bit, and see what results you can get. Try creating a table and selecting nth-child elements from your table. We’ll take a bit of a deeper look in the future at more advanced child selectors in the near future.

Dan Joseph is the CEO and head of Software Engineering of Familiaris Games.

Aside from my personal flash game projects, I am collaborating with Ben Davis on multiple future 
projects, and writing the story and script for an upcoming AAA level RPG, modelled after the same 
type of game play you see in Lost Odyssey, Final Fantasy, and other Japanese-based RPGs.  When 
I'm not developing games, I'm working as a Web Developer on various major brand web sites.

You can follow me on twitter @iamdanjoseph.  

If you wish to contact me, please click the contact page, 
and fill out the form.  I will get back to you as soon as I can.
Written by Dan
Welcome to my blog! Here you'll find my collection of bible study lessons, book reviews, and other posts I feel inspired to write. I am a Christian currently serving at First Baptist Church of Northville in Northville, MI.