Question

我有以下标记

<section id="section1" class="home-section home-38 homepagesection-section1">
 <div class="col-sm-4 col-md-4 col-lg-4 thronex night_out_lists">
    <ul class="ajax-terms">
       <li id="app-105"><a data-slide-index="0" href="javascript:void(0);" class="">Find Friends</a></li>
       <li id="app-107"><a data-slide-index="1" href="javascript:void(0);" class="">Buy Tickets,Pay Cover Charges</a></li> 

    </ul>
  </div>
 </section>


<section id="section2" class="home-section home-38 homepagesection-section2">
 <div class="col-sm-4 col-md-4 col-lg-4 thronex night_out_lists">
    <ul class="ajax-terms">
       <li id="app-108"><a data-slide-index="0" href="javascript:void(0);" class="">Find Friends</a></li>
       <li id="app-109"><a data-slide-index="1" href="javascript:void(0);" class="">Buy Tickets,Pay Cover Charges</a></li> 

    </ul>
  </div>
 </section>

<section id="section3" class="home-section home-38 homepagesection-section3">
 <div class="col-sm-4 col-md-4 col-lg-4 thronex night_out_lists">
    <ul class="ajax-terms">
       <li id="app-110"><a data-slide-index="0" href="javascript:void(0);" class="">Find Friends</a></li>
       <li id="app-111"><a data-slide-index="1" href="javascript:void(0);" class="">Buy Tickets,Pay Cover Charges</a></li> 

    </ul>
  </div>
 </section>

要求 - 我想在所有ul及其各自id

的活动下方运行

 $('.bxslider').bxSlider({
        mode: 'fade',
        auto: true,
        speed: 1000,
        infiniteLoop:true,
        pager:true,
        controls:false,
        pagerCustom: 'ul Ids here'

    });

问题 - 到目前为止，我尝试过这样做，但它仅影响第一个和第二个ul li，第三个被第一个ul取代{1}}的ID

 $('.thronex:nth-child(1)').each(function() {

        $(this).children('li').wrapAll($('<ul/>', {
            class: 'ajax-terms',
            id: 'bx-pager1'
        }));

        $(this).children('div').wrapAll($('<ul/>', {
            class: 'bxslider'
        }));

        $('.bxslider').bxSlider({
            mode: 'fade',
            auto: true,
            speed: 1000,
            infiniteLoop: true,
            pager: true,
            controls: false,
            pagerCustom: '#bx-pager1'

        });
});

 $('.thronex:nth-child(2)').each(function() {
    $(this).children('li').wrapAll($('<ul/>', {
        class: 'ajax-terms',
        id: 'bx-pager2'
    }));

    $(this).children('div').wrapAll($('<ul/>', {
        class: 'bxslider'
    }));
    $('.bxslider').bxSlider({
        mode: 'fade',
        auto: true,
        speed: 1000,
        infiniteLoop:true,
        pager:true,
        controls:false,
        pagerCustom: '#bx-pager2'

    });
});

 $('.thronex:nth-child(3)').each(function() {

    $(this).children('li').wrapAll($('<ul/>', {
        class: 'ajax-terms',
        id:'bx-pager3'
    }));
    $(this).children('div').wrapAll($('<ul/>', {
        class: 'bxslider'
    }));

    $('.bxslider').bxSlider({
        mode: 'fade',
        auto: true,
        speed: 1000,
        infiniteLoop:true,
         pager:true,
        controls:false,
        pagerCustom: '#bx-pager3'

    });
});

注意：上面的代码ID会在页面加载时添加到ul

我不知道自己做错了什么。任何正确的方向都会受到赞赏。

Answer 1

您在相同的元素上反复调用$('.bxslider')（请记住.bxslider会返回li类的所有元素），这是您不想要的做。

我从您的代码中理解的是，您希望将所有ul包裹在div中，然后将所有ul包裹在$('.bxslider').bxSlider({ mode: 'fade', auto: true, speed: 1000, infiniteLoop: true, pager: true, controls: false, pagerCustom: '#bx-pager1' });中。

你需要拿出

.each(function())

来自.each，并在bxslider完成后将其放置

还为每个循环中的所有$('.thronex:nth-child(1)').each(function() { $(this).children('li').wrapAll($('<ul/>', { class: 'ajax-terms', id: 'bx-pager1' })); $(this).children('div').wrapAll($('<ul/>', { class: 'bxslider slider1' })); }); $('.slider1').bxSlider({ mode: 'fade', auto: true, speed: 1000, infiniteLoop: true, pager: true, controls: false, pagerCustom: '#bx-pager1' });使用不同的类名。即

{{1}}

等等。

顺便说一句，你需要重构你的代码，因为很多代码都是重复的

如何使用不同的选择器ID多次处理事件

1 个答案: