如何用纯javaScript在jQuery中使用end（）

Question

我想将一个元素返回到链中的第一个元素，只要我有一个像这样的代码

<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

js lang-js prettyprint-override">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

Answer 1

我查看了前面的问题代码，并意识到您想要做什么，然后使用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>