jQuery的獲得TD寬度

Question

我想用jQuery 「TD寬度」 學習，對一個例子：

if(td.width=="100"){ 
    alert("td width = 100"); 
} 

請解釋。

<table width="200" border="1"> 
    <tr> 
     <td width="100">Number</td> 
     <td width="50">Order</td> 
    </tr> 
    <tr> 
     <td width="100">1</td> 
     <td width="50">Car</td> 
    </tr> 
</table> 

Answer 1

jQuery的寬度是這樣的方法，則需要調用的方法：

if(td.width() === 100) { 
    alert("td width = 100"); 
} 

和TD必須是理所當然的jQuery對象。請注意，它將採用jQuery對象集合中的第一個元素並獲取其寬度。如果您有很多元素，您需要使用.each（）來循環該集合中的每個元素。

Answer 2

這裏：

if($('table td').width() == 100) { 
    alert('width == ' + $('table td').width()); 
} 

Answer 3

我建議你有一點點閱讀jQuery Fundamentals，如果你想了解jQuery的更好。

在當前的例子應該是這個樣子：

if($('td').width() === 100) { 
    alert("td width = 100"); 
} 

注意，它會出現問題，如果萬一你在你的網頁超過一個td元素，所以我建議你認爲的更具體的查詢選擇器。

Answer 4

$('td').each(function(){ 
     if($(this).width() == 100){ 
      alert(this.textContent + " width = 100"); 
     } 
}); 

這將瀏覽所有的TDS，然後提醒TD的文本內容和「寬度= 100」如果寬度爲100

Answer 5

這裏有一個簡單的擴展，將CSS可以被編輯做的東西少侵入。

var tdWidthLimit = 100; 

$('td').each(function() { 
    tdWidth = $(this).width(); 
    if (tdWidth >= tdWidthLimit) 
    {  
     alert('hightlighted td width is ' + tdWidth); 
     $(this).css({'background-color' : '#f00'}); 
    } 
}); 

工作演示here