문자 수에 따라 규칙을 적용하는 조건문 만들기

Question

한 줄로 된 텍스트가있는 컨테이너가있는 상황에 처하게됩니다. 때때로 텍스트가 더 길어서 두 번째 줄로 나뉩니다. 이것은 레이아웃을 포기하기 때문에 솔루션이 필요합니다. jquery를 사용하여 "글자 수가 28자를 넘으면 10px 여백을 적용하여 텍스트를 가운데에 맞 춥니 다."라고 생각하고 있습니다.

jquery에서 어떻게 생각하세요? 즉, 문자 수에 따라 규칙을 적용하는 조건문을 만드는 것입니까?

<a href="#"> 
    <img src="images/dummy3.jpg" alt="dummy"> 
    <span class="redStrip">Here is a bunch of dummy text that is a bit too long</span> 
</a> 

Answer 1

앤서니 (Anthony)의 답변이있는 동안, 복수 요소가있는 jQuery 랩핑 세트의 .text()의 동작으로 인해 단일 요소에서만 작동합니다. (즉, .redstrip이 둘 이상의 DOM 요소를 선택한 경우 간단한 if은이를 자르지 않습니다).

답변을 확장하면 콜백 필터 또는 .each()을 적용 할 수 있습니다.

// via filter 
var redStrip = $('.redStrip'); 
redStrip 
    .filter(function() { return $(this).text().length > 28 }) 
    .css('margin-top','-10px') 
    ; 

// via .each() 
var redStrip = $('.redStrip'); 
redStrip.each(function() { 
    var $t = $(this); 
    if ($t.text().length > 28) { 
     $t.css('margin-top','-10px'); 
    } 
}); 

Answer 2

가로드 한 페이지 한 번 일정한 내용인가, 아니면 업데이트됩니다 : 여기 내 HTML은, redstrip의 스팬 클래스는 문자 수는 28 자 이상가는 경우 -10의 마진 탑을 필요로 사용자가 페이지와 상호 작용할 수 있습니까? 이전의 가정, 당신은이 작업을 수행 할 수 있습니다

var redStrip = $('.redStrip'); 
if(redStrip.text().length > 28) { 
    redStrip.css('margin-top', '-10px'); 
} 

동적 redStrip의 내용을 갱신하는 경우, 당신은 항상 함수에서 위의 코드를 포장하고 또한 때마다 당신이 할 것을 호출 할 수 있습니다.

편집 : .css() 호출에서 '-10px'으로 변경하십시오.