Question

我有这样的清单。当我单击下一个和上一个时，我要遍历所有列表项。如果下一个节内容完成，则应转到下一个节内容列表项。我该怎么办。

<ul class="main-section">
        <li class="section">
            <div class="section-header">
            </div>
            <ul class="section-content">
                <li class="content-item current">
                </li>
                <li class="content-item">
                </li>
                <li class="content-item">
                </li>
            </ul>
        </li>
        <li class="section">
            <div class="section-header">
            </div>
            <ul class="section-content">
                <li class="content-item">
                </li>
                <li class="content-item">
                </li>
            </ul>
        </li>
    </ul>

我的下一个和上一个点击功能如下

$('.right').click(function () {
    $('.current').next().trigger('click');
});
$('.left').click(function () {
    $('.current').prev().trigger('click');
});

点击项是

$(".content-item").click(function () {
   $(".current").removeClass("current");
   $(this).addClass('current');
});

Answer 1

var allListItems = document.querySelectorAll("li.content-item");

$('.right').click(function () {
   goTo(1);
});
$('.left').click(function () {
    goTo(-1);
});

function goTo(direction){
    
    //default the direction = forward (+1)
    direction = direction || 1;
    
    var currentItem = document.querySelector('li.current');
    var currentIndex = Array.from(allListItems).indexOf(currentItem);
    
    var newIndex = currentIndex + (direction);
    
    //make sure that the index is never lower or higher 
    //than the number of items available
    newIndex = newIndex > allListItems.length-1 ? 0 : newIndex;
    newIndex = newIndex < 0 ? allListItems.length-1 : newIndex;
    
    allListItems[currentIndex].classList.remove('current');
    allListItems[newIndex].classList.add('current');
}

.section-header:after{
    content: "Section Header";
}
li.content-item:after{
    content:"Hello";
}

li.current{
    background-color: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-section">
        <li class="section">
            <div class="section-header">
            </div>
            <ul class="section-content">
                <li class="content-item">
                </li>
                <li class="content-item current">
                </li>
                <li class="content-item">
                </li>
            </ul>
        </li>
        <li class="section">
            <div class="section-header">
            </div>
            <ul class="section-content">
                <li class="content-item">
                </li>
                <li class="content-item">
                </li>
            </ul>
        </li>
    </ul>
    
    <button class="left">left</button>
    <button class="right">right</button>

在您的示例中不起作用的原因是由于next()和prev()，这些函数在当前元素父级中寻找下一个 SIBLING ...

这就是它没有跳到下一个li的原因，因为它位于另一个parent

请参阅：https://api.jquery.com/next/

描述：获取匹配元素集中每个元素的紧随其后的同级元素。如果提供了选择器，则只有与该选择器匹配时，它才会检索下一个同级。

这里的重要部分是 SIBLING

Answer 2

我的解决方案是纯粹基于jquery的，在其中我找到下一个和上一个DOM出现

var counter = 0
$('.next').click(function(e){
if($('.content-item').eq(counter+1).length>0)
counter+=1;
else 
counter =0
var index =$('.content-item').eq(counter-1).removeClass('current');
var index =$('.content-item').eq(counter).addClass('current');
})
$('.prev').click(function(e){
if($('.content-item').eq(counter-1).length>0)
counter-=1;
else 
counter =-1
var index =$('.content-item').eq(counter+1).removeClass('current');
var index =$('.content-item').eq(counter).addClass('current');
})

.section-header:after{
    content: "Section Header";
}
li.content-item:after{
    content:"Hello";
}

li.current{
    background-color: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-section">
        <li class="section">
            <div class="section-header">
            </div>
            <ul class="section-content">
                <li class="content-item current">
                </li>
                <li class="content-item">
                </li>
                <li class="content-item">
                </li>
            </ul>
        </li>
        <li class="section">
            <div class="section-header">
            </div>
            <ul class="section-content">
                <li class="content-item">
                </li>
                <li class="content-item">
                </li>
            </ul>
        </li>
    </ul>
    <button class="next">NEXT</button>
    <button class="prev">PREV</button>

如何遍历多个列表中的下一个和上一个

2 个答案: