이미지 높이를 기준으로 클래스 추가

Question

'.photo'클래스가있는 페이지의 모든 이미지를 가져 와서 해당 이미지의 높이가 두 개 이상인 기사에 '.vertical'클래스를 적용 할 수 있습니까? 450px 키? 내가 이렇게하고있는 이유는 키가 큰 사진의 폭을 줄이기 위해서입니다. 따라서 클래스를 추가하여 표준 폭 500px 대신 250px의 기사를 만드는 스타일을 만드십시오.

기본적으로 사진의 500px 버전이 페이지에 표시되고 500px 사진의 높이가 450px 이상인 경우 해당 기사에 대한 클래스를 추가하여 문서 전체의 크기를 조정해야합니다.

혼란스러워 보이지만 한 번 이해하면됩니다. 나는이 코드에 익숙하지 않으므로 코드를 이해할 수있다. 나는 무엇을 해야할지 모른다.

Answer 1

예, 있습니다.

먼저 이미지 높이를 가져옵니다. How to get image size (height & width) using javascript?

높이가 요구 사항을 충족하는 경우 클래스를 추가하려면 .addClass()을 사용하십시오.

Answer 2

시도 :

$('img.photo').each(function(){ 
    if($(this).height() > 450) 
     $(this).closest('article').addClass('vertical'); 
}); 

부모 문서 클래스를 추가하도록 업데이트되었습니다. 필요에 따라 선택기 article을 변경하십시오. 희망이 당신이 시작하는 것이다

$(".photo").each(function(i) { 
    if ($(i).height() >450) { 
    $(i).addClass('yourclass'); 
    } 
}); 

Answer 3

이 시도 :

$(".photo").each(function(){ 
    var el = $(this); 
    if (el.height() > 450) 
    el.addClass("vertical"); 
}); 

Answer 4

뭔가처럼

$('img.photo').each(function(index) { 
    var height = $(this).height(); 
    if (height > 450) { 
     $(this).parent().addClass('vertical'); 
    } 
}); 

편집 :

하면 .vertical 클래스를 추가에 관해서 기사에 모자에는 마크 업에 따라 이미지가 포함되어 있습니다. @anonymous는 .article의 클래스로 가장 가까운 요소를 찾음으로써 가능한 한 가지 아이디어를 가졌습니다. 직접 부모가 이미지가 포함 된 기사 인 경우 위의 수정 된 코드에서와 같이 parent를 사용할 수도 있습니다.

Answer 5

: