Question

嗨，我在尝试解决我的这个问题时遇到了麻烦。虽然在我最后的6-7个小时的绝望中，我已经提出了几个可行的方案来解决问题，但我无法通过任何方式解决这个问题。我正在尝试编辑一些源代码（包含）以实现此问题的标题所暗示的内容。

我正在使用以下jQuery插件：jQuery Cycle Plugin - Pager Demo with Prev/Next Controls

我想要使用自己的标记来生成包含<a>元素中<li>个元素的链接，这些元素位于第一个和最后一个<li>之后和之前目标父元素中包含的元素...（<ul>）。这是插件配置：

$(function() {

    $('.recent_slider').cycle({
        fx:      'scrollHorz',
        timeout:  0,
        prev:    '.slide_l',
        next:    '.slide_r',
        pager:   '.slide_nav',
        pagerAnchorBuilder: pagerFactory
    });

    function pagerFactory(idx, slide) {
        var s = idx > 4 ? ' style="display:none"' : '';
        return '<li'+s+'><a href="#">'+idx+'</a></li>';

    };

});

pager: '.slide_nav',指的是父<ul>元素，我将此插件的下一个和前一个控件用作<li><a href="" class="slide_l"></a></li>（其中slide_l表示“向左滑动”/上一个）和{{ 1}}（意思是“向右滑动”/接下来）。

我希望能够做的是在<li><a href="" class="slide_r"></a></li>和return <li'+s+'><a href="#">'+idx+'</a></li>之间插入从.slide_l生成的寻呼机链接，所以它看起来像是：

.slide_r

问题是，在这之后添加它们实际上我得到了<ul class="slide_nav"> <li><a href="" class="slide_l"></a></li> <li'+s+'><a href="#">'+idx+'</a></li> <li'+s+'><a href="#">'+idx+'</a></li> <li'+s+'><a href="#">'+idx+'</a></li> <li><a href="" class="slide_r"></a></li> </ul>的内容，我需要的是"previous","next", "slide1", "slide2", "slide 3" ...

以下是插件的全能1500多行source code，以及上述配置和包含类名称的标记："previous","slide1", "slide2", "slide3", "next"，.slide_nav和.slide_l会引起头痛我有...

请帮忙。

Answer 1

由于您想要更改UI的显示方式，而不是内容的结构，因此CSS将是解决此问题的更好方法。

将您的HTML更改为：

<span class="slide_l"><a href="#">Prev</a></span>
<ul class="slide_nav"></ul>
<span class="slide_r"><a href="#">Next</a></span>

并添加此CSS（注意这只是一个起点，添加到它上面以使其看起来不错）：

.slide_nav, .slide_nav li, .slide_l, .slide_r {
    display: inline-block;
    margin: 0;
    padding: 0;
}

CSS使所有元素水平流动（使用display: inline-block），使其类似于标准的分页器。

小提琴：http://jsfiddle.net/dwx1v9c7/1/

Answer 2

您还可以获取html的{{1}}，然后将其作为字符串混乱。

.slide_nav

它远非最优雅的解决方案，但它应该有效。

如何在第一个<li>子元素之后的<ul>元素内生成这些jQuery链接？</li> </ul>

2 个答案: