jquery - Jqueryは表示する子を選択します

Question

私は次のhtmlを持っています

<div class="foo">
    <a href="" class="bar1">Bar1</a>
    <a href="" class="bar2">Bar2</a>
</div>

.foo がデフォルトで非表示になっているとしましょう。次に、.foo とその子の .bar1 を表示したいだけです。jqueryでこれを行う方法は？

私は私のjqueryにこれを持っています

$('#' + id).children(".foo //anything I can do here to select ONLY bar1 to show? ").show();

Answer 1

すべての子を非表示にして、 だけを表示しbar1ます。下記参照、

var $foo = $('.foo');    //cache foo
$foo.children().hide();  //hide all foo's children
$foo.show();             //show foo
$foo.find('.bar1').show();  //show bar1

Answer 2

これはうまくいくでしょう。

$('#' + id).find(".foo .bar1").show();

Answer 3

$(".foo").show();
$(".foo").children(".bar1").show();

$(".foo").children("not:(.bar1)").hide();//if not hidden

Answer 4

あなたはタイプすることができます

$('.foo').toggle();

foo div コンテナーを表示または非表示にします。

バー 1 を選択するには、$('.foo > .bar1').somefunction()または$('.foo').children('.bar1').somefunction();

要素を選択するには非常に多くの方法があります... または を使用して、要素が非表示かどう.hide()かを管理することもできます.show()

いつも素敵なリンクです: http://api.jquery.com/