特定のクラスがなければ、指定の要素を非表示にしたい

Question

<div id="CCC">
 <table class="BBB">
   <tbody>
     <tr>
       <th>□□□</th>
       <td class="close">○○○</td>
     </tr>
     <tr>
       <th>□□□</th>
       <td class="open">○○○</td>
     </tr>
      ・
      ・
      ・
   </tbody>
 </table>
 <div class="description row clearfix">
   <div class="col-xs-6 close_wrap"><span></span>定休日</div>
   <div class="col-xs-6 open_wrap"><span></span>営業日</div>
 </div>
</div>

table内にtd.closeが一つもなければdiv.close_wrapを非表示に。
同じくtd.openがなければdiv.open_wrapを非表示に。
table内に一つでもあれば表示させたいです。

ちなみにwordpressのfront-page.phpに上記HTMLを入力しています。
試行錯誤して下記コードを試しましたがダメでした。。

jQuery(".open_wrap:not(:has(td.open))").hide();

どなたか教えて頂ければと思います。よろしくお願い致します。

Answer 1

jQuery(".open_wrap:not(:has(td.open))").hide();

この指定では、td.openを内包しない.open_wrapを.hide()、みたいになってしまいますね。

if($('table .close').length<1){
	$('.close_wrap').hide();
}

if($('table .open').length<1){
	$('.open_wrap').hide();
}

ではどうでしょうか？
tableの中の.closeが1個より少ないとき（0のとき）、.close_wrapをhide()って感じです。

もう一つ、どうしてもセレクタでどうにかしたかったら、

jQuery("table:not(:has(td.open)) + .description > .open_wrap").hide();

としてみるのはどうでしょうか？

td.openを内包しないtableの　次の　.descriptionの　子要素.open_wrapを　hide()です。

Comments

[web]

回答ありがとうございます！
すみません、すごく初歩的なことをお伺いするのですが・・
教えて頂いたコードはどこに記述するのが良いのでしょうか?

[NatsumiOki]

①jQueryの本体は読み込んでいますか？
②質問内容で提示したコードはどこに入れて試しましたか？

もしかしてjQueryの使い方自体がわからないということでしょうか？

[web]

ありがとうございます。
jQueryは読み込んでいます。
footer.phpのwp_footerより下に記述しましたが動きませんでした。

[NatsumiOki]

scriptのタグで囲んであるのであれば、
```
<script>
$(function(){
//ここにコード
})
</script>
```
なのですが、WordPressということなので、動的にHTMLを生成している場合はうまくいかない可能性があります。
HTMLコードが出力されてレンダリングが終わったあとでないと、そもそも要素が存在しないからです。

```
<script>
jQuery(document).ready(function){
//ここにコード
});
</script>

```

とすることで、HTML要素を読み込み終わった後で処理が走ります。

[NatsumiOki]

すみません、ちょっと書き方が悪かったです。

<script>
$(function(){
$(document).on('ready',function(){
//ここにコード
});
})
</script>

[web]

ありがとうございました！おかげで無事動作しました！
ご丁寧に教えて頂いて本当に感謝です。
ありがとうございました。

Answer 2

書かれたコードでは「.open_wrap」の中の「td.open」を内包していない要素を取得したいように見えます。単純に jQuery( 'table .open' ).length > 0 のようにして有無を確認するのはどうでしょう。

jQuery( function() {
	if ( jQuery( 'table .open' ).length > 0 ) {
		jQuery( 'open_wrap' ).hide();
	}
	if ( jQuery( 'table .close' ).length > 0 ) {
		jQuery( '.close_wrap' ).hide();
	}
} );

Comments

[kei344]

あ、逆だったかも。

[web]

回答ありがとうございます。
逆というのは、どういうことでしょうか・・！

[kei344]

( jQuery( 'table .open' ).length > 0 ) は「あるとき」なので、.hide() するのは「ないとき」だったかな、と思いまして。

if ( ! jQuery( 'table .open' ).length > 0 ) {}
とすれば「ないとき」なので、そう書き換えればよいのですが、良い回答が既に付いていたのでそのままにしました。

コメントのやり取りの中で、「動かない」とかかれていますが、一度下記を試してみてください。
jQuery( function( $ ) {
/* NatsumiOkiさんのコードを入れる */
} );

また、動かない場合は「デベロッパーツール（開発者ツール）」を使ってエラーを確認し、その情報を追記されるとよいと思います。（解決の手がかりになると思います）

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

[web]

ありがとうございました！
お二方のおかげで無事動作しました！
丁寧に教えて頂いて本当に感謝です。
教えて頂いた開発者ツールも使わせて頂きます。