如何使用jQuery分别检索每个div的内容

Question

我有以下的html，我一直在选择我想要的内容有困难。我使用的是jQuery，而.children()没有获取文本节点。

<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 -->

我想循环通过'planetGranite‘div，并选择每个'productName’类的内容，一个接一个，这样我就可以构建一个交互式菜单。下面是输出的一个示例：

<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 -->

这是我目前所拥有的，但是，我知道我离得很远，因为我不知道如何处理这个问题。它必须使用任何以这种方式格式化的html。

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;
        }  
    }

我已经阅读了文档，但我很难让contains()方法工作起来。请帮助我找到最简单和最快的方式来选择内容。谢谢!

Answer 1

我正要发这篇文章时，你的编辑出现了。这是一些代码，将使产品以正确的顺序。您可能需要修改它以便在您的函数中使用它。

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

Answer 2

您需要使用类名productName的.each()函数获取每个div的内容，如下所示：

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

要获得更好的演示参考，请使用此JSfiddle链路

Answer 3

​

$(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 -->

​