충분한 공간이있을 경우에만 디스플레이 요소

Question

다른 메시지가있는 테이블이 있는데, 하나의 테이블 행에는 항상 하나의 메시지가 있습니다. 메시지에는 제목에 이름과 시간도 포함됩니다. 메시지/테이블 행 너비는 가변적입니다. 너비가 너무 작 으면 이름과 시간을위한 충분한 공간이 없습니다. 그렇기 때문에 충분한 공간이없는 경우 으로 설정하는 스크립트를 만들려고합니다. .time을 display: none으로 설정합니다.

이것은 내가 지금까지 가지고있는 것입니다. 불행히도, 그것은 작동하지 않습니다.

$("tr").each(function() { 
    var width = $(this).width(); 
    var name = $(".name").width(); 
    var time = $(".time").width(); 
    var total = name + time; 
     if (total >= width) { 
      $(".time").css("display", "none"); 
     } 
}); 

Answer 1

현재 요소가 아닌 .name/.time 클래스가있는 요소의 모든 인스턴스를 검색하고 있습니다. smth 시도하십시오. 이 같은 : 인라인 블록이 다음 오버 플로우 - y로 TR을 설정합니다 :

$("tr").each(function() { 
    var $this = $(this); 
    var width = $this.width(); 
    var wname = $this.find(".name").width(); 
    var time = $this.find(".time"); 
     if (wname + time.width() >= width) { 
      time.css("display", "none"); 
     } 
}); 

는 또한 디스플레이에 시간과 이름을 모두 설정을 시도 할 수 있습니다 그럴 높이가 고정되어있는 경우 숨겨진 이름/시간 높이에 해당

Answer 2

코드에서

var name = $(".name", this).width(); 
var time = $(".time", this).width(); 

, 당신은 당신의 코드를 실행할 것으로 예상되는 요소를 선택하지 않습니다 : 각 jQuery를 호출에 컨테이너 요소를 포함 잊고있다.

HTML과 CSS로 피델을보고 확실히 작동하는지 확인하는 것이 좋습니다. 한편 this fiddle을 참조하십시오. 여기서는 ul 요소와 함께 작동합니다.