Jquery操作当前有classtag的对象而不是操作类本身？

Question

所以我目前正在开发一个响应式joomlatemplate，它会在视口变小时用滑动导航替换导航栏。在这种情况下，我想尽可能长时间地保留导航栏，我按如下方式进行：我为导航创建了两个不同的css类，我总是通过JS分配所需的一个。我称这些课程为“肖像”和“风景”。

所以在肖像的css我得到了：

.portrait .menu li{
width = 100%;
...
}

在css for landscape中我得到了：

.lanscape .menu li{
width = auto;
margin-left = 5px;
margin-right = 5px;
...
}

所以现在我确定导航在js文件中必须具有的最小宽度，如下所示：

 var minnavwidth = 0; 
 var navelements = $jQ("#main-navigation").find(".menu").children();
 for (var i = 0; i < navelements.length; i++) {
 minnavwidth += $jQ(navelements[i]).outerWidth(true);
 }

但是，由于我希望导航栏中的菜单项均匀分布，我在一个只触发一次的方法中写了这个：

$jQ(".landscape .menu li").css("width", 100 / navelements.length + "%");

我现在遇到的问题是，即使在将“portrait”类分配给我的导航并删除“landscape”类之后，slidemenu中的菜单项仍然具有20％的宽度（5个menuitems atm）。我能想象的唯一原因是，JQuery将css分配给当前具有类的DOMnodes，而不是将其分配给类本身。那是对的吗？除了每次切换类时手动重新分配属性之外，还有什么办法吗？