CODEWITHSUNDEEP
javascriptjqueryhtmltextnodes
Matt
Matt

Reputation: 879

How can I retrieve the contents of each div individually using jQuery

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!

Upvotes: 1

Views: 60

Answers (3)

Eyal
Eyal

Reputation: 788

$(document).ready(function() {
  var planet = $('#planetGranite');
  planet.children('.menuItem').each(function(item) {
    var productId = $('.productId', this).text();
    var productName = $('.productName', this).text();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 -->

Upvotes: 0

Rahul
Rahul

Reputation: 2307

You need to fetch contents of each div with class name productName by using .each() function as::

$(".productName").each(function(){
    alert($(this).text());
});

For better reference with Demo use this JSfiddle Link

Upvotes: 0

rdubya
rdubya

Reputation: 2916

Your edit showed up just as I was about to post this. Here is some code that will get the products in the correct order. You will probably need to modify it to use it in your function.

$('#planetGranite').find('.productName').each(function(){
    var title = $(this).text();
    console.log(title);
});

Upvotes: 3

Related Questions