если высота элементов больше х addClass «портрет» еще addClass «ландшафтный»

Question

Я пытаюсь написать этот сценарий:

если высота элементов больше 226, addClass «портрета», еще addClass «ландшафтного»

у меня есть это:

var assetHeight = $("video.img-responsive").outerHeight(); 

if (assetHeight > 226){ 
    $("video.img-responsive").addClass('portrait'); 
} 
else { 
    $("video.img-responsive").addClass('landscape'); 
} 

Однако, когда я инспектировать свои элементы все они только имеют дополнительный класс «пейзаж», хотя некоторые элементы имеют высоту больше, чем 226.

Кроме того, когда я переверните сценарий:

var assetHeight = $("video.img-responsive").outerHeight(); 

if (assetHeight < 226){ 
    $("video.img-responsive").addClass('landscape'); 
} 
else { 
    $("video.img-responsive").addClass('portrait'); 
} 

Все элементы еще добавлять класс пейзаж.

Когда я пользуюсь своей консолью, чтобы проверить мои селекторы и найти высоту каждого отдельного элемента, она дает мне правильные высоты элементов. Однако высота не указана в css или html. давая элементам высоту по умолчанию авто.

вот мой HTML:

<div id="mTS_1" class="mTSWrapper mTS_horizontal"> 

<ul id="mTS_1_container" class="mTSContainer" 
style="position: relative; top: 0px; left: 0px; width: 815px;"> 

    <li class="mTSThumbContainer"> 
     <div class="asset-container"> 
      <video class="img-responsive landscape" type="video/mp4"   
      src="https://ternpro-development.s3.amazonaws.com/media/ 
      films/69/mobile/2.mp4" data-id="69"></video> 
     </div> 
     <span class="thumnail-video"></span> 
    </li> 

    <li class="mTSThumbContainer"> 
     <div class="asset-container"> 
      <video class="img-responsive landscape" type="video/mp4" 
      src="https://ternpro-development.s3.amazonaws.com 
      /media/films/71/mobile/3.mp4" data-id="71"></video> 
     </div> 
     <span class="thumnail-video"></span> 
    </li> 

</ul> 

</div> 

консоли:

$("[data-id='72']").outerHeight(); 
224 

$("[data-id='73']").outerHeight(); 
710 

Answer 1

Я думаю, что ваша проблема вызвана его с помощью селектора подбирая все видео на этой странице. Вместо этого проведите через них и примените логику к отдельным элементам.

$("video.img-responsive").each(function(){ 
    var _self = $(this); 

    if (_self.outerHeight() > 226){ 
     _self.addClass('portrait'); 
     _self.removeClass('landscape'); 
    } else { 
     _self.addClass('landscape'); 
     _self.removeClass('portrait'); 
    } 
}