0

すべての子スパンに隠しクラスがある場合、親 DIV を非表示にしようとしています。私のドキュメントには、1 つまたは 2 つの非表示のスパンを持つ同じクラスの他の div がありますが、3 つの子すべてに非表示のクラスがある場合にのみ、親の div を非表示にしたいと考えています。

ここに私のHTMLがあります：

<div class="example">
<span class="hidden">Design</span>
<span class="hidden">Development</span>
<span class="hidden">Branding</span>
</div>

クラスが表示されているスパン要素がある場合、親の Div を非表示にしたくありません。したがって、次の場合は次のようになります。

<div class="example">
<span class="visible">Design</span>
<span class="hidden">Development</span>
<span class="visible">Branding</span>
</div>

サンプルの div はまだ表示されているはずです。3 つの子スパンすべてに非表示クラスがある場合にのみ表示されます。

そして、これが私が試したjQueryです：

$('.example').each(function(){
if($('.hidden')(':visible').length == 0) {
$('.example').hide();
}
});

言うまでもなく、それはうまくいきませんでした。

編集: セレクターが変更されました - 例をより一般的なものに更新しました。

4

4 に答える 4

0

その HTML を考えると、次のことをお勧めします。

$('.example').each(function(){
    var that = $(this).find('.hidden');
    return that.length === that.not(':visible').length;
});

JS フィドルのデモ。

.exampleこれは、要素が参照している関連する親要素であると想定しています。

または、わずかに別のアプローチ:

$('.example').css('display',function(){
    var children = $(this).children();
    return children.length === children.not(':visible').length ? 'none' : 'block';
});

JS フィドルのデモ。

参考文献:

于 2013-04-21T16:54:30.873 に答える
0

この回答は、例で述べたように、.example 親コンテナーの 3 つの要素すべてに .hidden クラスがある場合を探していることを前提としています。

var childElements = $('.example .hidden');

if (childElements.length === 3) {
    $('.example').hide();
}

*更新: 最初の例は、'.example' 要素が 1 つしかない場合にのみ機能します。次の例では、各 '.example' 要素を個別にループします。

var parents = $('.example');

// Loop through each parent element, finding only it's childeren
parents.each(function(index, item) {

    var $item = $(item),
        childElements = $item.find('.hidden');

    if (childElements.length === 3) {
        $item.hide();
    }
});
于 2013-04-21T17:10:03.810 に答える
0

親divクラスが「example」の場合、この方法を試してください

$(document).ready(function (){
   $('div.example .hidden').each(function(){
    $(this).parent().hide();
    });
});

あなたの2番目の説明によると、あなたが求めているものに対応するために、次の変更を加えました

$(document).ready(function(){
    var count = 0;
    $('div.example .hidden').each(function(){ //take the count of hidden span tags
    count++;
    });
    $('div.example').children().each(function(){
     if($('div.example').children().length==count){  // check whether the count of hidden span tag element length is equal to all the child element length
       $('div.example .hidden').parent().hide();
       }else{
           //alert('There is an visible element');
            }
    });
});
于 2013-04-21T16:57:31.750 に答える