Question

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

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

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

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

$("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中创建一个链接。

Answer 1

$('#names-list li').each(function (i) {
 $(this).append("<a href='#'>slide</a>");
});

<强> JSFIDDLE DEMO

更新了JSFIDDLE DEMO

Answer 2

首先，如果在div.button-wrap中需要与li相同的no链接。那么你的代码就是完美的。

第二，如果您需要链接在li中，那么只需使用$（this）作为当前li并将HTML附加到其中。

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

Answer 3

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

对于幻灯片中的每个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

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

3 个答案: