Jquery - 循环遍历具有特定类的每个 div 并根据其宽度应用一个新类答案

【问题标题】：Jquery - Loop through each div with a certain class and apply a new class depending on its widthJquery - 循环遍历具有特定类的每个 div 并根据其宽度应用一个新类
【发布时间】：2012-09-28 15:46:29
【问题描述】：

我遇到了一些 jquery 问题，想知道您是否可以提供帮助。

我有一个带有下拉菜单的菜单，我想根据它是哪个列表项以及下拉菜单的宽度来更改下拉菜单的位置，这就是我到目前为止所得到的...

$(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');

}
});

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

我希望这是有道理的。

【问题讨论】：

api.jquery.com/each 是您所需要的。

标签： jquery loops navigation width each

【解决方案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');
        }
    });
});

【讨论】：

e 通常代表event 对象。我会使用el 来避免混淆。
jQuery 文档现在倾向于在许多示例中使用domEle 以确保人们能够理解它，因此显然存在一些混淆。我总是只使用e，因为我知道我使用的是事件还是元素，但这只是我！
我遇到的一个问题是它应用了正确的类，但在某些情况下它也应用了“优惠”类，你知道为什么会这样吗？

【解决方案2】：

您需要将此应用于所有菜单项，因此您想使用 each() 选择它们；

$('.sub-nav-wrapper').each();

然后，您可以使用异常函数为“每个”编写代码。

$('.sub-nav-wrapper').each(function() {
    // YOUR CODE HERE                                       
}); // End each

使用 $(this) 关键字对“每个”项目进行检查。

 $('.sub-nav-wrapper').each(function() {
    alert($(this).width()); // for example                                      
 }); // End each

【讨论】：

【解决方案3】：

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

【讨论】：