我想将一个元素返回到链中的第一个元素，只要我有一个像这样的代码
<ul class="items">
<li class="item-child">list item 1</li>
<li class="item-child">list item 2</li>
<li class="item-child">list item 3</li>
</ul>
然后我想激活一个叫active的类，只有在第一个元素和其他元素中将没有叫active的类，下面的元素将向上移动以替换第一个元素，而第一个元素将返回链中。
这段使用jQuery的代码如下所示
null
$(".items > .item-child:gt(0)").removeClass("active");
setInterval(function() {
$(".items > .item-child:first").removeClass("active");
setTimeout(function() {
$(".items > .item-child:first")
.next()
.addClass("active")
.end()
.appendTo(".items")
}, 4000)
}, 10000)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="items">
<li class="item-child">list item 1</li>
<li class="item-child">list item 2</li>
<li class="item-child">list item 3</li>
</ul>null
这是我在寻找解决方案时生成的代码
null
document.querySelector('.items > .item-child:not(:first-child)').classList.remove('active')
setInterval(function() {
var otif = document.querySelectorAll('.items > .item-child:first-child');
otif.forEach(function(e) {
e.classList.remove('active');
});
setTimeout(function() {
document.querySelectorAll('.items > .item-child:first-child').forEach((e) => {
e.nextElementSibling.classList.add('active');
console.log(e.nextElementSibling)
})
}, 4000)
}, 10000)<ul class="items">
<li class="item-child">list item 1</li>
<li class="item-child">list item 2</li>
<li class="item-child">list item 3</li>
</ul>null
我查看了前面的问题代码，并意识到您想要做什么，然后使用vanilla JavaScript将下面的演示放在一起。诚然，我用一些随机的图像使它变得很有趣，但我认为它本质上与您最初使用jquery所做的一样
null
const _INTERVAL=5;
( function( i ){
// find the parent element - UL
let ul=document.querySelector('ul.items');
(function(){
setTimeout( arguments.callee, 1000 * i );
// remove the active class from ALL li elements
ul.querySelectorAll('li.active').forEach( li => { li.classList.remove('active') } );
// take the element node and the text node and move to the bottom of the list
ul.append( ul.childNodes[0] );
ul.append( ul.childNodes[1] );
// add the `active` class to the first element
ul.firstElementChild.classList.add('active');
})();
})( _INTERVAL );ul.items{ list-style:none!important; }
.items li{ margin:0.5rem auto }
.active{ color:red; }
.active:after{
content:'';
display:inline-block;
height:6rem;
width:12rem;
background-image:url( //static.thenounproject.com/png/438141-200.png );
background-size:contain;
background-repeat:no-repeat;
animation: shake 0.25s cubic-bezier(.36,.07,.19,.97) both;
}
li > img{ border-radius:0.5rem; border:1px solid gray; padding:0.25rem;}
.active > img{ box-shadow:0 0 15px rgba(255,0,0,0.5);animation: shake 1.25s cubic-bezier(.4,.08,.29,.97) both;}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0) rotate(0deg);
}
20%, 80% {
transform: translate3d(2px, -5px, 0) rotate(-5deg);
}
30%, 50%, 70% {
transform: translate3d(-4px, 5px, 0) rotate(5deg);
}
40%, 60% {
transform: translate3d(4px, -5px, 0) rotate(-10deg);
}
}<ul class='items'>
<li class='active'><img src='//placem.at/things?w=200&h=100&random=1&txt=1' /></li>
<li><img src='//placem.at/things?w=200&random=2&h=100&txt=2' /></li>
<li><img src='//placem.at/things?w=200&random=3&h=100&txt=3' /></li>
<li><img src='//placem.at/things?w=200&random=4&h=100&txt=4' /></li>
<li><img src='//placem.at/things?w=200&random=5&h=100&txt=5' /></li>
</ul>