2

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

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

所以我的问题是： 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 在 div.button-wrap 内为 ul 中的每个 li 创建一个链接。

4

3 回答 3

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

JSFIDDLE 演示

更新了 JSFIDDLE DEMO

于 2013-09-05T18:00:24.983 回答
0

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

其次，如果您需要链接位于 li 内，则只需将 $(this) 用于当前 li 并在其中附加 HTML。

$("div.brandtile ul slider li").each(function () {
    $(this).append("<a href='#'>slide</a>");
});
于 2013-09-05T18:05:25.910 回答
0

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

对于幻灯片中的每个li元素，将 a 添加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 演示

于 2013-09-05T18:06:44.933 回答