ブログ

要素がない時存在を消す

by Yasuko

CMSなどで登録するための要素は3個あるけど、3個目に情報がない。

そんなときには

3個目の要素の存在を消してしまおう

存在を消すと言ってもdivごと消してしまうとflexの具合がよろしくない。

divは残しつつ、存在をけしましょう。

<div class="col_3">
  <div class="box">
    <div class="box_img"><img src="dummy.png" alt="ダミー画像"></div>
    <p class="title">タイトル</p>
  </div>
  <div class="box">
    <div class="box_img"><img src="dummy.png" alt="ダミー画像"></div>
    <p class="title">タイトル</p>
  </div>
  <div class="box">
    <div class="box_img"></div>
    <p class="title"></p>
  </div>
</div>

CMSなどで3個目の要素に画像やタイトルを登録しない場合、書き出されたタグは上記のようになります。

var counter = 0;
  $('.col_3 .box').each(function(){

    var str = document.getElementsByClassName('box_img')[counter].children;　//子要素を取り出す

    if (str.length === 0){　//子要素があるかないかを判断

      var img = document.getElementsByClassName('box_img')[counter];
      img.style.padding = "0"; 
      img.style.margin = "0";

      var box = img.parentNode; //.box_imgの親要素を指定
      box.style.padding = "0";
      box.style.margin = "0";
  
    }

  counter++;
  });
  •  $(‘.col .box’).each(function()で.boxの数だけループさせる
  • if (str.length === 0) で.box_imgの中が空かどうかを判断
  • 空だったら要素のpaddingとmarginを0にする

CMSって便利なようで・・・