javascript - 动态CSS类属性？

Question

我有一个导航栏，其元素是使用 Struts2 呈现的 iterator标签如下:

<ul>
    <li><a href="#">Home</a></li>

<s:iterator var="row" value="#session.PrivMenu.children" status="stat">         
    <li>
        <a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
            <s:property value="#row.moduleName"/>
        </a>
    </li>
</s:iterator>  

</ul>

现在我必须为每个 <a> 应用一个图标元素。由于每个导航栏元素的图标都不同，因此每个 <a> 都需要不同的样式。标签。

我怎样才能在 struts2 中实现这个？？

我想到了动态cssClass属性。

cssClass = '<s:property value="#row.moduleName"/>' + icon

但我认为以后如果模块名称更改，我将不得不编辑我的 css。我走错了吗？？？有更好的主意吗？

Answer 1

如果您想使用 nth-child，它不适用于 ie8 或更低版本的浏览器。 另一种可能性(如果菜单结构没有改变)是使用一个带有计数器的独特类。

然后使用正确的css来设计菜单

如果您有可能使用计数器，您可以这样使用:

<ul>
  <li class="menu-1"><a href="#">Home</a></li>
  <s:iterator var="row" value="#session.PrivMenu.children" status="stat">
    <li class="menu-2"><a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
      <s:property value="#row.moduleName"/></a>
    </li>                       
  </s:iterator>
  <s:iterator var="row" value="#session.PrivMenu.children" status="stat">
    <li class="menu-3"><a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
      <s:property value="#row.moduleName"/></a>
    </li>                       
  </s:iterator>    
</ul>