I have the following html and I've been having trouble selecting the content I desire. I am using jQuery and the .children() does not get the text nodes.

```
<div id="hiddenMenus">

    <div id="planetGranite">
        <div class="menuItem">
            <div class="productId">1</div>
            <div class="productName">Child Admission</div>
        </div>
        <div class="menuItem">
            <div class="productId">2</div>
            <div class="productName">Adult Admission</div>
        </div>
        <div class="menuItem">
            <div class="productId">3</div>
            <div class="productName">Senior Admission</div>
        </div>
        <div class="menuItem">
            <div class="productId">4</div>
            <div class="productName">Student Admission</div>
        </div>

        <!-- Variable For Loop (Easier than Child-Nodes) -->
        <div class="totalMenuItems">4</div>
    </div>

</div><!-- End of #hiddenMenus -->

```

I want to loop through the 'planetGranite' div and select the contents of each 'productName' class, one-by-one, so that I can build an interactive menu. Here is an example of the output:

```
<div class="product">
            <div class="productName">Child Admission</div>
            <div class="quantity"><input type="text" name="quantity" placeholder="2"  /></div>
            <button type="button" onclick="addItem('Child Admission')">Add Item</button>
</div><!-- End of .product -->

```

Here is what I currently have, however, I know I am far off because I am not sure exactly how to approach this problem. It must work with any html formatted this way.

```
function generateMenu(menuId) {
    // Get the Total Number of Menu Items
    var totalItems = $('#' + menuId + " .totalMenuItems" ).html();
    if (DEBUG && DEBUG_INPUT) alert("Menu: " + menuId + "\n"
                                    + "Items: " + totalItems + "\n");

    // Get a reference to the Menu
    var menu = $('#' + menuId);
    var menuItem = null;

    //alert(menu.html());
    if (DEBUG && DEBUG_GEN_MENU) alert("Number of Children: " + (menu.children('.menuItem').length));
    if (DEBUG && DEBUG_GEN_MENU) alert("Children: " + "\n"
                                        + "firstChild: "
                                        + menu.contents().filter(function() {
                                                                return this.nodeType === 3;
                                                                })
                                                                .wrap( '<div class="productName"></div>' )
                                                                .end());

    for (var i = 0; i < menu.childNodes.length; i++) {
        if (menu.childNodes[i].className == "menuItem") {

            menuItem = menu.childNodes[i];
            console.log("MenuItem");
            //processMenuItem(menuItem);
            break;
        }  
    }

```

I've read up on the documentation, but I am struggling to get the contains() method to work. Please help me find the simplest and fastest way to select the contents. Thanks!