使用 jQuery 创建元素每个都不起作用答案

【问题标题】：Create elements with jQuery each not working使用 jQuery 创建元素每个都不起作用
【发布时间】：2014-08-09 01:44:32
【问题描述】：

我有一个动态旋转器，我正在尝试为每个图像创建一个导航按钮。我无法访问后端，所以我必须在加载时使用 jQuery。

我的想法是我找到每个 LI 项目并创建一个新项目并将其附加到导航中，但我似乎无法让它工作

jQuery

navItem = 0;

$( "li" ).each(function() {
    navLink = '<a href="javascript:void() id="rot' + navItem + '"></a>';
    $('section').append(navLink);
    navItem++;
});

HTML

<section>
        <ul>
            <li>Slide</li>
            <li>Slide</li>
            <li>Slide</li>
        </ul>
        <nav></nav>
</section>

【问题讨论】：

确保关闭 a 标签中的 href。它也可以使用一些锚文本。此外，将其包装在准备好的文档中，以确保在将 li 添加到页面后触发它

标签： javascript jquery each

【解决方案1】：

使用$('section nav') 而不是$('section'). 试试这个：

navItem = 0;

$( "li" ).each(function() {
    navLink = '<a href="javascript:void()" id="rot' + navItem + '"></a>';
    $('section nav').append(navLink);
    navItem++;
});

DEMO

希望对你有帮助:)

【讨论】：

【解决方案2】：

您缺少引号。你永远不会关闭 href 引用。你也应该像@Unknown所说的那样分配给导航。

navItem = 0;

$( "li" ).each(function() {
    navLink = '<a href="javascript:void()" id="rot' + navItem + '"></a>';
    $('section nav').append(navLink);
    navItem++;
});

Working fiddle

【讨论】：

【解决方案3】：

您将链接添加到 <section> 元素而不是 <nav> 元素。

$( "li" ).each(function() {
    navLink = '<a href="javascript:void() id="rot' + navItem + '"></a>';
    $('nav').append(navLink);
    navItem++;
});

查看此更新的 jsfiddle jsfiddle.net/bc0yu7pg/5/

但是我认为你的 CSS 可能需要一些额外的工作。

【讨论】：

【解决方案4】：

您不能将 section 用作 DOM 中的普通容器来进行这种操作。 https://stackoverflow.com/a/7183188/1027550

【讨论】：