JQueryを使用して特定のクラスのない要素を非表示にするにはどうすればよいですか？

Question

私はページ上に「記事」というクラスを持つ複数のdivを持っています。私は、 "article"クラスの最初のdivに "current"クラスを追加するために

$(".article:first").addClass("current"); 

を使用しました。ボタンをクリックするまで他のすべてのclass = "article" divを非表示にします。

ページが読み込まれると、最初のclass = "article" divが表示されます。ボタンをクリックすると、2番目のdivが表示されます。

編集：class = "article" divは2つの異なるクラスのdivに表示されますか？

<div class="roots"> 
    <div class="article"> 
    </div> 
</div> 
<div class="words"> 
    <div class="article"> 
    </div> 
</div> 

私はそれらをJQueryで別々に扱う必要がありますか？

Answer 1

あなたはこのjQueryを使って示すのみ最初の1の初期状態を設定することができます

$(document).ready(function() { 
    $(".article").hide(); // hide them all 
    $(".article:first").show().addClass("current"); // show first one and add class 
}); 

もののを、私は個人的に彼らの要素がJSの前に簡単に表示されることがあるため、初期状態のために自分をJSを使用していないだろうそれはきれいに見えないかもしれません。

.article {display: none;} 

そして、あなたは最初のものを表示し、あなたの現在のクラスを追加するには、この初期のJavaScriptを実行します：.articleはCSSで、デフォルトでは非表示にすることが持っている方がよいかもしれません

$(document).ready(function() { 
    $(".article:first").show().addClass("current"); // show first one and add class+ 
}); 

その後、時

$("#showButton").click(function() { 
    $(".article:hidden:first").show(); 
}); 

あなたはこのここでの実施例を参照することができます：http://jsfiddle.net/jfriend00/RPPYz/ボタンを押して、あなたがこれを実行することができます隠され、次のいずれかを表示します。

Answer 2

$(".article").not(":first").hide() 

または

$(".article").not(".current").hide() 

Answer 3

非表示にするには最初のポストが、すべて、これを試してみてください。

$(".article").not(":first").hide(); 

がなく、すべての記事にクラス電流をを非表示にするには、これを使用する：

$(".article").not(".current").hide(); 

このセレクタを使用し、ボタンがクリックされたもので、各記事1を表示するには：

$(".article.current:hidden").first().show(); 

:hiddenセレクタの詳細はhereを見つけることができます。