要素の中に文字列が無いときに、要素を非表示にしたいがJqueryがうまくいかない。

Question

前提・実現したいこと

spanクラスに対して装飾のためのcssを作っています。
foreachで$vieWDataの中身を取り出しているため、中身が無い時もcssが適用されてしまいます。

<span class="badge">
　<?php echo h($viewData['cate1name']); ?>
</span>
<span class="badge">
  <?php echo h($viewData['cate2name']); ?>
</span>

中身が無かった時にはcssをdisplay:none;で非表示にしようと考えているのですがJqueryで試行錯誤してみましたがうまくいきません。
ご指摘お願いします。

試したこと

<span id="js-category1" class="badge">
  <?php echo h($viewData['cate1name']); ?>
</span>
<span id="js-category2" class="badge">
  <?php echo h($viewData['cate2name']); ?>
</span>

var $category1 = $('#js-category1').text(),
    $category2 = $('#js-category2').text();


        if ($category1.length = 0) {
            $('#js-category1').css({
'display','none'
            });
        }
        if ($category2.length = 0) {
            $('#js-category2').css({
                'display','none'
            });
        }

Answer 1

phpのソースが混じってわかりづらいです
spanの中に改行がはいっているのでlengthは0にならないですし
演算子が等号(=)なので比較にさえなっていません

Comments

[yambejp]

たとえばこう

<script>
$(function(){
$('.badge').filter(function(){return $(this).text().replace(/\s/g,'')==="";}).hide();
});
</script>
<span class="badge">
aaa
</span>
<span class="badge">
bbb
</span>
<span class="badge"></span>
<span class="badge">
</span>
<span class="badge">

</span>

[coco144]

ご指摘ありがとうございます。勉強になります。
そして、提示していただいたコードで希望通りの結果になりました！

条件（replaceメソッドで空白文字を削除した上で比較して空なら）に合った要素をfilterメソッドで抽出し、hide()メソッドで要素を消すという解釈で合っていますでしょうか？

[yambejp]

大丈夫、あってます

[coco144]

ありがとうございます！
とても勉強になりました。的確なご回答をくださり感謝いたします！

Answer 2

<spanの後に全角スペースが入っているようです。

　classのように書いてあると、class属性として正しく認識されません。

Comments

[coco144]

回答ありがとうございます。
本来のコードをコピペして内容を少し書き換えたので不必要なスペースが入っていました。
質問させて頂く上で今後気をつける観点として頭に入れておきます。
※ご指摘の件は訂正しました。

Answer 3

CSSではダメですか？「:empty」で指定できると思います。

CSS selector: :empty(Can I use)

Comments

[coco144]

回答ありがとうございます。
試してみたのですが、うまく適用されず…でした。
yambejpさんが言われているように、空白や改行のせいでうまくいかなかったのかもしれません。
でも新しい知識を教えて頂き勉強になりました。ありがとうございます！