Question

我正在尝试使用Jquery

将子节和子项添加到子节

子项的每个项目对其父项都是唯一的。我已经做了一些接近但我无法在新添加的小节下添加项目。

                $(function() {
        var scntDiv = $('#subRootItems');
        var i = $('#subRootItems').size() + 1;

        $('#addSubFOODItem').live('click', function() {
                $('<div class="menuItemContainer"><input type="text" value="" placeholder="Item Name" name="foodItemName'+ i +'" class="itemFieldEdit"><div class="itemPrice"><input type="text" value="" placeholder="Price" name="foodItemName' + i +'" class="priceInput"></div><div class="actionItemBox"><div class="homeLBoxRightEdit" id="remItem"><i class="icon-trash" id="remSubFoodItem">REMOVE ITEM</i></div></div></div>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remSubFoodItem').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('.menuItemContainer').remove();
                        i--;
                }
                return false;
        });
    });
    $(function() {
        var scntDiv = $('#menuSubSection');
        var i = $('#menuSubSection').size() + 1;

        $('#addSubSection').live('click', function() {
                $('<div class="menuSubCategoryTitle"><div class="menuCategoryTitle"><div style="float: left;"><i class="icon-menu" style="margin-right: 5px;"></i>Vegetarian</div><div class="menuEditIcons"><a href="#"><i class="icon-plus-1" style="margin-right: 5px;"></i></a><a href="#"><i class="icon-trash" id="delSubSection">REMOVE SUB SECTION</i></a></div></div><div class="addMenuBtns"><div class="visualMenuBtn" id="addSubFOODItem"><i class="icon-food-1" style="margin-right: 5px;"></i>New Food-Item</div></div></div><div id="subRootItems"></div><div class="clear"></div>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#delSubSection').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('.menuSubCategoryTitle').remove();
                        i--;
                }
                return false;
        });
    });

请看一下：http://jsfiddle.net/AnmQy/

提前致谢：）

Answer 1

使用下面提到的代码替换您的$('#addSubFOODItem').live('click', function() { .... });代码，并检查它是否符合您的要求。

$('#addSubFOODItem').live('click', function () {
                var SubFoodItemDiv = $(this).parents("div.menuSubCategoryTitle");
                $('<div class="menuItemContainer"><input type="text" value="" placeholder="Item Name" name="foodItemName' + i + '" class="itemFieldEdit"><div class="itemPrice"><input type="text" value="" placeholder="Price" name="foodItemName' + i + '" class="priceInput"></div><div class="actionItemBox"><div class="homeLBoxRightEdit" id="remItem"><i class="icon-trash" id="remSubFoodItem">REMOVE ITEM</i></div></div></div>').appendTo(SubFoodItemDiv);
                i++;
                return false;
            });

如果您的要求丢失，请告诉我。

Answer 2

您总是将它们添加到第一个#subRootItems。基本上你需要DIV的唯一ID。

如何在div中添加div - 就像一个嵌套 - 使用jquery

2 个答案: