javascript - 如何使用 jQuery 单独检索每个 div 的内容

标签 javascript jquery html text nodes

我有以下 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() 方法发挥作用。请帮我找到最简单快捷的选择内容的方法。谢谢!

最佳答案

就在我正要发布此内容时,您的编辑出现了。下面是一些代码,可以按正确的顺序获取产品。您可能需要修改它才能在您的函数中使用它。

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

关于javascript - 如何使用 jQuery 单独检索每个 div 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27391951/

相关文章:

javascript - JS 函数可以与 2 个不同的调用一起使用。

javascript - 使用 Javascript 更改 CSS 中元素的背景颜色

javascript - 如何在另一个 Vue 项目中使用 Vue Web 组件(由 Vue-CLI 3 生成)?

jquery - 使用 jquery mobile 访问手机功能,例如相机和电话

javascript - ng-repeat 带有键和值,然后使用键作为 ng-model 的指令值

jquery - 从字符串中获取 div 值

javascript - 如何在正确的行而不是所有行中显示此消息

javascript - webrtc音频或视频广播可以承受多少用户?

javascript - 外部 javascript 文件无法在所有内容之上添加 div

php - 如何在php中真正包含html代码