开发者

JQuery - Find the first identical class after a specific class

开发者 https://www.devze.com 2023-02-08 01:32 出处:网络
lets say I have this divs: Js files needed: Jquery & Jquery UI <div id=\"news-content\"> <div class=\"item current\"><strong>Example 1</strong></div>

lets say I have this divs:

Js files needed: Jquery & Jquery UI

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

Im have this code:

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)

After the init - I want to catch the next "item" after "current" class and make the same operation as "init" on it. how can I do it with jquery?


I am not so sure if i meet your requirement but i have something to show you

<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>
0

精彩评论

暂无评论...
验证码 换一张
取 消