2011-02-03 67 views
1

後找到的第一個相同的類可以說我有這樣的div:JQuery的 - 一類特殊

.js文件需要: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> 

林有這樣的代碼:

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) 

初始化後 - 我要趕後「當前」類下一個「項目」,並作出同樣的操作就可以了「初始化」。我怎麼能用jQuery來做到這一點?

+1

我真的不知道你想要做什麼,反正結賬jQuerys`的.next()` :http://api.jquery.com/next/ – jAndy 2011-02-03 07:28:40

回答

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>