【jQuery、javascript】親要素の直下の最後の要素を取得する方法

コンテンツ最後に特定のclassがついた要素があったらゴニョニョしたかったときの備忘録

親要素の直下の最後に特定のclassがつく要素があるかどうか判別する方法

htmlのコード

<div class="parent">
  <div class="child">長男だよ</div>
  <div class="child">次男だよ</div>
  <div class="child">三男だよ</div>
  <div class="child strange">変なおじさん</div>
</div>

jqueryのコード

jQuery(function($){
  if($(".parent").children('*:last').hasClass('strange')){
    $(".parent").children('*:last').css({"display":"none"});
  }
});

javascriptでやる場合

var parent = document.querySelector('.parent');
if (parent.lastElementChild.classList.contains("strange")) {
  //最後の要素にstrangeクラス持ってるかどうか条件分岐
  parent.lastElementChild.style.display = "none";//おじさん消す
}

.classList.containsで指定した要素があるかないか判別できるみたい