Question

我有一个动态旋转器，我正在尝试为每个图像创建一个导航按钮。我无法访问后端，因此我必须在加载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>

Answer 1

使用$('section nav')代替$('section').试试这个：

navItem = 0;

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

<强> DEMO

希望这可以帮助你：）

Answer 2

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

navItem = 0;

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

Working fiddle

Answer 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可能还需要一些额外的工作。

Answer 4

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

用jQuery创建元素都不起作用

4 个答案: