如何使用jQuery獲取具有一定寬度的元素？

我正在一個頁面上有大約6個div的「bar」類，但每個div的寬度根據用戶的輸入而動態變化。我現在需要做的是改變寬度爲250px的所有div的顏色以及「bar」類。我的概念如下：如何使用jQuery獲取具有一定寬度的元素？

if($('.bar').width() == 250) { 
    $(this).addClass('barColor'); 
} 
else { 
    $(this).removeClass('barColor'); 
}

這基本上是我的概念，但我不知道如何達到效果。這將不勝感激，如果有人可以幫助

謝謝。

來源

2012-03-05 user14412

可能重複的[jquery：檢查具有一定寬度的div]（http://stackoverflow.com/questions/4457425/jquery-check-for-divs-with-a-certain-width） – 2012-03-05 02:08:33

$('.bar').each(function(){ 
    if($(this).width() == 250) 
     $(this).addClass('barColor'); 
    else 
     $(this).removeClass('barColor'); 
}).

來源

2012-03-05 02:12:59

這種工作原理類似於魅力。非常感謝你！ – user14412 2012-03-05 03:23:05

如果你只有一個.bar元素，但你有多個，你建議的解決方案聽起來應該起作用。我看到的另一件事是，如果你想繼續以給定的時間間隔運行它，那麼每當這些框被動態改變時，你就會應用這個效果。

$(window).resize(function() { 
    clearTimeout(this.id); 
    this.id = setTimeout(adjustClass, 500); 
}); 

function adjustClass() { 
    $('.bar').each(function() { 
    if $(this).width() == 250) { 
     $(this).addClass('barColor'); 
    } 
    else { 
     $(this).removeClass('barColor'); 
    } 
    }); 
}

編輯：每個窗口大小時，效果將被稱爲每500毫秒，而用戶是在調整，以避免函數調用每一個窗口大小調整差異的資源佔用。

來源

2012-03-05 02:16:36 gtr32x

爲什麼不只是綁定到窗口大小調整事件，每1/2秒搜索DOm是浪費資源 – charlietfl 2012-03-05 02:59:30

我的不好，我說錯了。它被綁定到resize事件，並且如果存在調整大小，它將每500毫秒執行一次函數。這樣，函數不會爲每個調整大小運行，而是在用戶調整大小時每500毫秒執行大小調整事件處理程序。編輯原始答案。 – gtr32x 2012-03-05 03:06:06

感謝您的解決方案！在我的情況下，我通過AJAX從python腳本中檢索一些數據，單獨使用.each（）似乎已經解決了這個問題，所以不需要設置超時。無論如何，感謝您的迴應！ – user14412 2012-03-05 03:28:18

如何使用jQuery獲取具有一定寬度的元素？

回答

相關問題