Question

我想说我有这个div：

需要Js文件： Jquery＆amp; Jquery UI

<div id="news-content">
    <div class="item current"><strong>Example 1</strong></div>
    <div class="item"><strong>Example 2</strong></div>
</div>

我有这个代码：

var News = {
   init : function(){
      $('#news-content')
        .find('.item:first-child')
        .addClass('current')
        .show('slide',{direction:"up"},500);

      $('#news-content')
        .find('.item:first-child')
        .addClass('current')
        .delay(1000)
        .hide('slide',{direction:"down"},500);



  },

  show : function() {
    // ...
  }
}

$(document).ready(News.init)

在init之后 - 我想在“当前”类之后捕获下一个“项目”，并在其上执行与“init”相同的操作。我怎么能用jquery做到这一点？

Answer 1

我不确定我是否符合你的要求，但我有东西可以告诉你

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<style>
    .item{
        color: black;
        background: green;
    }
    .current{
        color: red;
        background: yellow;
    }
</style>
<script>
$(function (){
    show(); 
});

var current;

function show()
{
    if(current == null){
        current = $("#news-content div.item:first-child")
    }
    else{
        $(current).attr({"class": "item"});
                    //do the transition for old here back to normal
        current = $(current).next();            
        if(!current){
            return false;
        }
    }
    $(current).attr({"class": "current"});
            //do the animation for current slide here
    setTimeout("show()", 4000);
}

</script>
<div id="news-content">
<div class="item"><strong>Example 1</strong></div>
<div class="item"><strong>Example 2</strong></div>

<div class="item"><strong>Example 3</strong></div>
<div class="item"><strong>Example 4</strong></div>


<div class="item"><strong>Example 5</strong></div>
<div class="item"><strong>Example 6</strong></div>


<div class="item"><strong>Example 7</strong></div>
<div class="item"><strong>Example 8</strong></div>
</div>

JQuery - 在特定类之后找到第一个相同的类

1 个答案: