jQuery: Добавить класс динамически в зависимости от разрешения окна браузера

Привет, друзья, я пытаюсь динамически добавить класс в тело в зависимости от разрешения окна браузера. Вот код, который я пытаюсь использовать, но мне нужна помощь в настройке, поскольку я вообще не знаю jQuery.

Параметры, которые я хочу достичь:

Когда посетитель заходит на мой сайт, этот код должен проверить размер окна своего браузера и добавить класс в тело в соответствии со следующими правилами

1. Если размер окна равен больше 1024px , но меньше 1280px, затем добавьте класс .w1280 .

2. Если размер окна больше, чем 1280px , но меньше, чем 1440px, затем добавьте класс .w1440 .

3. Если размер окна на больше, чем 1440px , но меньше 1280px, тогда добавьте класс .w1680 .

4. Если размер окна на больше, чем 1680px, тогда добавьте класс .wLarge .

Для этого, Я пытаюсь использовать следующий сценарий. Мои вопросы:

1. Это правильный код ? Если нет, то какой правильный код?

2. Это лучший самый короткий код? Если нет, то какой будет правильный код?

Пожалуйста, помогите, поскольку мои знания о jQuery почти НУЛЕВЫЕ.

function checkWindowSize() {  
    if ( $(window).width() > 1024) { 
        $('body').addClass('w1280');  
        } else {  
        $('body').removeClass('w1280');  
    } 
    if ( $(window).width() > 1280 ) { 
        $('body').addClass('w1440');  
        } else {  
        $('body').removeClass('w1440');  
    } 
    if ( $(window).width() > 1440) { 
        $('body').addClass('w1680');  
        } else {  
        $('body').removeClass('w1680');  
    } 
    if ( $(window).width() > 1600) { 
        $('body').addClass('wLarge');  
        } else {  
        $('body').removeClass('wLarge');  
    } 
}    
checkWindowSize()