13

经常有人希望将列表中的第一个和/或最后一个项目与其他项目区别对待。有没有办法用小胡子做到这一点？行条纹呢？

（显然，在模板被处理后，总是可以使用 jquery 或其他任何东西来应用 css 类，或者其他什么，但我想知道模板级别的更多内容。）

4

2 回答 2

12

小胡子很轻，所以 AFAIK，它不提供该功能。

您可以使用类似的东西来获得偶数/奇数类：

var view = {
  arr: ['one', 'two', 'three'],
  clazz: function() {
    return _counter++ % 2 == 0 ? 'even' : 'odd';
  }
};

var template = '{{#arr}}<span class="{{clazz}}">{{.}}</span>{{/arr}}';
Mustache.to_html(template, view);

或者先对数据进行预处理，如下所示：

function preprocessArrayWithFirstLastClass(src) {
  var clazz;
  for (var i = 0; i < src.length; i++) {
    clazz = i % 2 == 0 ? 'even' : 'odd';
    if (i == 0) clazz += ' first';
    if (i == src.length - 1) clazz += ' last';
    src[i].clazz = clazz;
  }
}

var view = {
  arr: preprocessArrayWithFirstLastClass([{name: 'one'}, {name: 'two'}, {name: 'three'}])
};

var template = '{{#arr}}<span class="{{clazz}}">{{name}}</span>{{/arr}}';
Mustache.to_html(template, view);
于 2010-12-11T01:21:35.427 回答
11

我建议用纯 css/css3做这两个，不需要 js！当您尝试做的事情不是处理内容时，这似乎很理想。未来就是现在！：

CSS行条带化：

利用nth-child();

http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/

这不会为 ie7 和 ie8 ( http://caniuse.com/#search=nth-child ) 显示，但他们仍然可以获得内容，所以我认为这是一个胜利。

样式化静态列表的最后一个元素：

#nav li + li + li{
// Crazy styles on the 3rd li here!
}

（有很好的支持：http ://caniuse.com/#search=sibling ）

样式化动态列表的最后一个元素

使用 :last-child。

div#test p:last-child {color: red;}
div#test p:first-child {text-decoration: underline;}

:last-child 在 ie7 和 ie8 ( http://caniuse.com/#search=last-child )中不受支持，所以要小心你在这里做的事情会优雅地降级。奇怪的是， :first-child 是，所以你可以说，默认情况下对所有元素进行着色，然后从第一个子元素中显式删除它们，这实际上适用于所有浏览器。

于 2012-10-02T16:46:39.027 回答