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

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

，我已经尝试了所有我能想到的方法来修复它

以下是html代码（由于长度原因，我没有包括所有内容）：

波塔提斯。

...

Potatisbullar。

...

波塔提斯莫斯

...

JS:

$（文档）.ready（generateMenu）；
$（文件）.ready（附加概念）；
函数生成器u（）
{
var menyList=$（“
”）；
$（“#receptmeny”）.append（menyList）；
$（“.post h4:第一个孩子”）。每个（函数（i）
{
var txt=$（this.closest（.post”）.find（“h4”）.text（）；
变量li=$（“
”）
.appendTo（menyList）；
var aLink=$（“”）
.attr（“href”、“#recept”+i）
.text（txt）
.附件（李）；
});
}
函数addedRecept（）
{
$（“.post h4”）。每个（功能（i）
{
$（this.attr（“id”，“recept”+i）；
});
}

这将创建以下列表：

• 波塔提斯
• 波塔提斯
• 肺大泡
• 肺大泡
• 波塔提斯莫斯
• 波塔提斯莫斯

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

$（文档）.ready（generateMenu）；
$（文件）.ready（附加概念）；
函数生成器u（）{
var menyList=$（“
”）；
$（“#receptmeny”）.append（menyList）；
$（“.post h4:第一个孩子”）。每个（函数（i）{
txt=$（this）.closest（.post”）.find（“h4”）.text（）；
var li=$（“
”）.appendTo（menyList）；
var aLink=$（“”）.attr（“href”，“接收”+i）.text（txt）.appendTo（li）；
});
}
函数addedRecept（）{
$（“.post h4”）。每个（功能（i）{
$（this.attr（“id”，“recept”+i）；
});
}

波塔提斯。


Potatisbullar。


波塔提斯莫斯

这是一个有趣而棘手的问题
请检查jquery第一个函数的第二行-

var li=$（“
”）

这应该是-

var li=$（“
”）

然后，它将根据您的需要生成

---

祝你好运

@MikaelLennholm尝试一下示例代码，它不会。至少在铬上！当我换成

时，它工作得很好，至少在safari@xarroo这意味着它可以在Chrome和Safari上运行。为什么你没有选择我的答案，而是选择了另一个与我完全相同的用户答案？@PankajShukla我想我可以选择两个答案，因为你和戴维都给出了相同的答案。对不起，我弄错了，我会改回你的答案，因为你先给出了答案。（我是新来的，所以还在学习它是如何工作的）@PankajShukla示例代码中没有使用

$（“
”）的部分
只是jQuery中
的简写，在Chrome中工作得非常好。为什么取消选择我的答案？我早就给出了同样的答案！我可以知道原因吗？我想我可以选择两个答案，因为你和戴维都给出了相同的答案。对不起，我弄错了，我会改回你的答案，因为你先给出了答案。（我是新来的，所以还在学习如何工作）好的，没有问题！祝你一切顺利！
<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>

$(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);
    });
}