0

クラス名に応じて要素をトラバースし、このクラスがある場合は何らかのアクションを実行する方法を理解しようとしています。ない場合は何か他のことを行います。

これまでの私のコードを見てください：

<script type="text/javascript">
jQuery(document).ready(function($) {
     var container = $('.container');

     container.each(function() {
          // if all list item has class of hidden then hide parent container
          container.hide();

          // if not all list item has class of hidden then show parent container
          container.show();
     });
});
</script>

<div class="container container1">
     <ul>
          <li class="item">item 1</li>
          <li class="item hidden">item 2</li>
          <li class="item">item 3</li>
          <li class="item">item 4</li>
     </ul>
</div>

<div class="container container2">
     <ul>
          <li class="item hidden">item 1</li>
          <li class="item hidden">item 2</li>
          <li class="item hidden">item 3</li>
          <li class="item hidden">item 4</li>
     </ul>
</div>

上記のコードから、container2 内のすべてのリスト項目が「非表示」のクラスを持っているため、目的の結果は完全に非表示になります。すべてのリスト項目に「hidden」クラスがあるわけではないため、container1 が表示されます。

ご覧のとおり、「each」関数を使用してコンテナーを反復処理するところまで行きましたが、特定のクラスの各リスト項目をチェックする場所を実装する方法に行き詰まっています。私の考えは、その中で別の各機能を実行することですか? しかし、確かではありません...

ご覧いただきありがとうございます。

4

5 に答える 5

3

コードゴルフ：

$('.container').each(function() {
    $(this).toggle(!!$('li:not(.hidden)',this).length);
});

http://jsfiddle.net/mblase75/Ajjkc/

于 2013-01-09T19:03:15.867 に答える
1 
container.each(function() {
    var $this = $(this);
    if ( $this.find('li:not(.hidden)').length ) {
        $this.show();
    } else {
        $this.hide();
    }
});

これがフィドルです：http://jsfiddle.net/5AHQZ/

于 2013-01-09T19:00:09.770 に答える
1

非表示のアイテムの数がすべてのリスト アイテムと等しい場合は、コンテキストcontainerとしてさらに選択し、コンテナーを非表示にすることができます。それ以外を表示します。

$('.container').each(function() {
  var li1 = $('li', $(this)).length;
  var li2 = $('li.hidden', $(this)).length;
  if (li1 == li2)
    $(this).hide();
  else
    $(this).show();
});

テストについては、 JSFiddleを参照してください。

于 2013-01-09T19:05:58.860 に答える
0

あなたが欠けているのは、あなたがループしている次のようなものです:

jQuery(document).ready(function($) {
     var container = $('.container > ul > li');

     container.each(function(index, element) {
          if($(element).hasClass('hidden')){
            $(element).css({display: 'none'});
          }
     });
});

セレクターも改造。

よろしく、

于 2013-01-09T19:01:29.440 に答える
0 
$('.container').each(function() {
    if ($(this).find('.item.hidden').length == $(this).find('.item').length)
        $(this).hide();
    else
        $(this).show();        
});
于 2013-01-09T19:01:58.363 に答える