Jquery - 使用某个类循环遍历每个div并根据其宽度应用新类

Question

我遇到了一些问题,并且想知道你是否可以提供帮助.

我有一个带下拉菜单的菜单,并希望根据下拉菜单的位置更改下拉菜单的位置以及下拉菜单的宽度,这是我到目前为止所得到的...

$(document).ready(function() {
var subnavWidth = $('.sub-nav-wrapper').width();

if(subnavWidth > 900) {
    $('.sub-nav-wrapper').addClass('two-column-offers');
} else if (subnavWidth > 800) {
    $('.sub-nav-wrapper').addClass('one-column-offers');
} else if(subnavWidth > 600) {
    $('.sub-nav-wrapper').addClass('offers');
} else if(subnavWidth > 500) {
    $('.sub-nav-wrapper').addClass('two-column');
} else if(subnavWidth > 300) {
    $('.sub-nav-wrapper').addClass('one-column');

}
});

但只考虑菜单中的第一个列表项,并将相关类应用于每个子导航.我希望它检查每个子导航的宽度而不仅仅是第一个,然后将该类应用于该特定的子导航.

我希望这是有道理的.

Answer 1

$(function() {
    $('.sub-nav-wrapper').each(function(i,elem) {
        var width = $(this).width();
        if(width > 900) {
            $(elem).addClass('two-column-offers');
        } else if (width > 800) {
            $(elem).addClass('one-column-offers');
        } else if(width > 600) {
            $(elem).addClass('offers');
        } else if(width > 500) {
            $(elem).addClass('two-column');
        } else if(width > 300) {
            $(elem).addClass('one-column');
        }
    });
});?