2011-02-03 15 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) 

initの後 - "current"クラスの次の "item"をキャッチし、 "init"と同じ操作をしたいと思います。 jqueryでどうすればいいですか?

+1

を表示するために何かを持っている場合、私はとにかく、チェックアウトjQuerys '.next(、あなたが何をしようとして、実際にはわからないのでわかりません)' :http://api.jquery.com/next/ – jAndy

+0

あなたは自動スクロールをしようとしています –

+0

私は毎回ニュースアイテムを別々に表示しようとしています。アイテムをスライドさせて表示し、スライドさせて非表示にしてからあなたのコードは次の – WEBProject

答えて

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> 
関連する問題