Question

您好我对这里所述的jquery插件文档有点困惑： http://learn.jquery.com/plugins/basic-plugin-creation/

我的HTML标记：

    <ul id="slider1">
        <li><img src="images/slides/slide1.png" alt=""></li>
        <li><img src="images/slides/slide2.png" alt=""></li>
        <li><img src="images/slides/slide3.png" alt=""></li>
    </ul>

我的jquery脚本：

    $('#slider1').jSlider();

在我的jakeSlider.js脚本（自定义插件）

上

    (function($){
        $.fn.jSlider = function(){
          var $slidePos = 1;
          var $slideCount = $(this).find('li').length;
          var $next = $(this).find('a'); //FOR MY NEXT TEXT Hyperlink

          $(this).find('li:nth-child(' + $slidePos + ')').css('display', 'block');

          $($next).click(function(){
              $(this).find('li:nth-child(' + $slidePos + ')').fadeOut('slow');
              if($slidePos < $slideCount){
                  $slidePos += 1;
              }else{
                  $slidePos = 1;
              }
              $(this).find('li:nth-child(' + $slidePos + ')').fadeIn('slow');
             });
          };
    }(jQuery));

我的问题：我如何访问或迭代ul中的列表索引？我的意思是，我将沿着插件脚本访问“li”..

Answer 1

如果您的ul是this，那么您可以选择li这样的元素：

$("li", this)

如果你想迭代它们，你可以做类似的事情：

$("li", this).each(function(){
    //Do stuff here.
});

编辑1

我发现您的代码存在一些问题，导致它无法为我工作。

您使用$('#slider1').jakeSlider();来调用插件，但是您已将插件命名为jSlider。但这很容易解决。
您的示例HTML不包含任何a元素，因此该行永远不会找到任何内容：var $next = $(this).find('a');
由于＃2，处理$next对象点击的逻辑永远不会触发。

Answer 2

如果函数名称是jSlider $.fn.jSlider = function(){，那么您必须使用$('#slider1').jSlider();

从jQuery插件代码中的ul ID访问li

2 个答案: