Question

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

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

Answer 1

小胡子很轻，所以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);

Answer 2

我建议使用 pure 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;}

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

使用mustache.js行条带化和第一个/最后一个类

2 个答案:

Css行条带化：

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

为动态列表的最后一个元素设置样式