Question

我一直在尝试使用jQuery在特定div中创建一个列表，该列表应该作为链接到页面中某些配方的菜单。因此，列表是根据html中的配方确定的。我已设法为每个食谱创建id并设法创建列表和链接。但是，在列表中，代码为每个食谱创建了两个

，我已经尝试了一些我可以考虑修复它的内容。

这是html代码（由于长度，我没有包含所有内容）：

<div id="primarycontent">
            <div class="post">
                <h4>
                    Potatis.
                </h4>
                <div class="contentarea">
                    <p>
                        ...
                    </p>
                </div>
            </div>
            <div class="post">
                <h4>
                    Potatisbullar.
                </h4>
                <div class="contentarea">
                    <p>
                        ...
                    </p>
                </div>
            </div>
            <div class="post">
                <h4>
                    Potatismos
                </h4>
                <div class="contentarea">
                    <p>
                        ...
                    </p>
                </div>
            </div>

JS：

$(document).ready(generateMenu);
$(document).ready(addIdRecept);    

function generateMenu() 
{
var menyList = $("<ul></ul>");
$("#receptmeny").append(menyList);

$(".post h4:first-child").each(function(i)
{
    var txt = $(this).closest(".post").find("h4").text();
    var li = $("<li><li/>")
    .appendTo(menyList);
    var aLink = $("<a></a>")
    .attr("href","#recept" + i)
    .text(txt)
    .appendTo(li); 
});
}

function addIdRecept()
{
    $(".post h4").each(function(i) 
    {
        $(this).attr("id", "recept" + i);
    });
}

这会创建此列表：

Potatis
Potatis
Potatisbullar
Potatisbullar
Potatismos
Potatismos

为什么会创建两个列表项？

Answer 1

$(document).ready(generateMenu);
            $(document).ready(addIdRecept);

            function generateMenu() {
                var menyList = $("<ul></ul>");
                $("#receptmeny").append(menyList);

                $(".post h4:first-child").each(function (i) {
                    txt = $(this).closest(".post").find("h4").text();
                    var li = $("<li></li>").appendTo(menyList);
                    var aLink = $("<a></a>").attr("href", "#recept" + i).text(txt).appendTo(li);
                });
            }

            function addIdRecept() {
                $(".post h4").each(function (i) {
                    $(this).attr("id", "recept" + i);
                });
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="primarycontent">
        <div class="post">
            <h4>
                Potatis.
            </h4>
            <div class="contentarea">
                <p>
                    
                </p>
            </div>
        </div>
        <div class="post">
            <h4>
                Potatisbullar.
            </h4>
            <div class="contentarea">
                <p>
                    
                </p>
            </div>
        </div>
        <div class="post">
            <h4>
                Potatismos
            </h4>
            <div class="contentarea">
                <p>
                    
                </p>
            </div>
        </div>
        </div>
    <div id="receptmeny">

原因是这一行：

var li = $("<li><li/>").appendTo(menyList);

将行修改为：

var li = $("<li></li>").appendTo(menyList);

请注意，您是在li之后而不是之前添加/。

Answer 2

这是一个有趣而棘手的问题。
请检查jquery第一行的第二行 - var li = $("<li><li/>")
这应该是 - var li = $("<li></li>") 然后它会根据你的需要生成。

祝你好运

jQuery：为什么它从一个元素创建两个列表项

2 个答案: