javascript - 可以使用JQuery .each函数为ul中的每个li创建链接吗？

我一直在尝试创建一个在右上角具有分页按钮的滑动横幅。我正在尝试编写一些在分页中为无序列表（ul）中的每个列表项（li）创建一个按钮的JQuery。

我做了一些研究，发现JQuery的.append可以创建需要填充包含分页按钮的div的HTML按钮链接。

所以我的问题是：可以使用JQuery的.each在分页div中为滑块ul中的每个li创建一个按钮链接吗？

到目前为止，这是我想出的代码：

$("div.brandtile ul.slider li").each(function () {
    $("div.button-wrap").append("<a href='#'>slide</a>");
});

我将不胜感激与此有关的帮助！ JavaScript / JQuery对我来说仍然是新的。谢谢！

这是HTML（我只包括li之一，但ul中最多可以有5个）：

<div class="brandtile">
    <div class="button-wrap"></div>
    <ul class="slider">
        <li style="background-image: url('/Image Library//brandtiles/brandtile1.jpg');">
            <div class="description">
                <h3>College and Career Readiness</h3>
                <a href="#">Learn More</a>
            </div>
        </li>
    </ul>
</div>

我正在尝试获取它，因此JQuery为ul中的每个li在div.button-wrap中创建了一个链接。

最佳答案

我认为最好的方法是缓存滑块容器元素，然后设置对幻灯片和幻灯片导航的引用。

对于幻灯片中的每个li元素，将li附加到滑块导航中，并使用迭代值自动生成幻灯片编号和href值。

$(function(){
   var slider = $('#slider');
   var slideshow = slider.find('.slider');
   var slider_nav = slider.find('.slider-nav');

    slideshow.find('li').each(function(i){
        slider_nav.append('<li><a href="#' + ( i + 1 ) + '">Slide ' + ( i + 1 ) + '</a></li>');
    });
});

JSFIDDLE DEMO