web関連

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

2020/01/17

2020/02/03

コンテンツ最後に特定の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"});
  }
});

.children()だと直下の要素しか取得できないから孫要素まで検索範囲に入れたいんだったら.find()を使ったほうがいいみたい

 

javascriptでやる場合

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

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

querySelector()だったらfor文でループさせなくてもいいの楽で好き
 

コンテンツを包むarticleとかの要素の中の最後の要素によってはmarginとか制御したくて調べた