Question

就jQuery难度而言，我确信这非常容易。但是，自从我使用它以来已经很久了，我无法记住该怎么做。

我正在使用Parse数据库，并且在拉取数据并为每个数据创建包装div时尝试迭代每个配方。请参阅下面的代码：

<h2>Recipes<h2>
<ul id="recipe-list"></ul>

<script type="text/javascript">

    $(document).ready(function(){

        window.console&&console.log('foo');

        Parse.initialize("jX8QururhGgSqp0jfRASN1R9jQBKRDyBUv6SJvBX", "phxNyYWjNCdO38elRqmaPTEmeNAaxE3YCazkWbMd");

        var Recipes = Parse.Object.extend("Recipes");
        var myClassCollection = Parse.Collection.extend({ model: Recipes })
        var Recipes = new myClassCollection();

        Recipes.fetch({

            success: function(collection) {

                // for each recipe, append to the list

                var counter = 0 
                var table = $('<table></table>').addClass('foo');

                collection.each(function(object) { 

                    if (counter <= 10) {
                        $("#recipe-list").append("<div id=recipe>""</div>")
                        $("#recipe").append("<div>" + object.get("name") + "</div>");
                        $("#recipe").append('<img src="'+ object.get("img") +'" />');

                        // $("#animal-list").append("<div class='rec-name'>" + object.get("name") + "</div>");

                        counter = counter + 1
                    }
                });
            },
            error: function(colleection, error) {
                // oops an error has occured
                alert(error);
            }
        })

    });

</script>

然而，当我运行这个时，我得到一个结果，如：

<div class="recipe">
    <name>
    <img>
    <name>
    <img>
    <name>
    <img>
 </div>
 <div class="recipe"></div>
 <div class="recipe"></div>
 <div class="recipe"></div>

所有食谱都位于一个div内，而不是自己的。

任何帮助将不胜感激！

Answer 1

你的问题就在这一行：

$("#recipe-list").append("<div id=recipe>""</div>")

您会注意到，在每种情况下，您都会附加id=recipe的div。这导致多个div具有相同的id。然后在下一行中，尝试

$("#recipe").append("<div>" + object.get("name") + "</div>");

当然，这不起作用，因为只有一个div id="recipe"。所以你需要让包装器id成为数据库中的食谱id或类似的东西。

Answer 2

我通常只将object.id连接到div id的末尾：

$("#recipe-list").append("<div id=recipe" + object.id + "></div>");

然后：

$("#recipe" + object.id).append("<div>" + object.get("name") + "</div>");

Answer 3

正如史蒂夫K上面提到的那样，id被复制使得无法选择正确的元素，所以你每次都只是抓住第一个元素。如果你不需要id在元素上，你可以像这样链接元素创建：

$("#recipe-list").append("<div></div>").append("<div>" + object.get("name").append('<img src="'+ object.get("img") +'" />');

如果你做需要id，只需使用相同的代码，但就像你使用img和name标签一样在其中添加id。这是一个比每次遍历DOM更好的解决方案，通过其id查找元素。另一种方法是将元素保存在变量中，并将其附加到变量中：

var recipeElement = $('<div></div');

// you could chain these on the element creation above, like the first example as well and then append it all on the main element below - jQuery is pretty flexible with this stuff
recipeElement.append("<div>" + object.get("name");
recipeElement.append("<div>" + object.get("img");

$("#recipe-list").append(recipeElement);

出于性能原因，您希望尽可能避免遍历DOM。

jQuery：对于每组对象，追加到不同的div

3 个答案: