Question

我正在使用我的模板创建ListView：

HTML：

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div class="ItemTemplate">
        <div class="back"></div>
        <div data-win-bind="innerText:Info.shortName" class="shortName"></div>
        <div data-win-bind="innerText:value Converters.BeginValue" class="value"></div>
        <div data-win-bind="innerText:value Converters.EndValue" class="valueEnd"></div>
        <div data-win-bind="innerText:Info.longName"></div>
        <img data-win-bind="src:Info.flag" class="flag" />
        <div data-win-bind="innerText:change Converters.BeginChange" class="change"></div>
        <div data-win-bind="innerText:change Converters.EndValue" class="changeEnd"></div>
        <div data-win-bind="innerText:changePercent Converters.BeginChangePercent" class="changePercent"></div>
        <div data-win-bind="innerText:changePercent Converters.EndValue" class="changePercentEnd"></div>
    </div>
</div>

问题是当我遇到需要调整字体大小的很长的名字时。

所以我这样做（ 列表中的每个元素 ）：

JavaScript的：

template = document.getElementById('ItemTemplate'); 
    // Adjust font - size 
    var name = item.data.Info.longName;
    // Split by words
    var parts = name.split(' ');
    // Count words
    var count = parts.filter(function(value) {
        return value !== undefined;
    }).length; 
    var longNameDiv = $(template).children("div").children("div").eq(4); 
    if (count > 2) {
        // Display very long names correctly
        $(longNameDiv).removeClass();
        $(longNameDiv).addClass("veryLongName");
    }

var rootDiv = document.createElement('div');
template.winControl.render(item.data, rootDiv);
return rootDiv;

CSS：

.veryLongName {
    font-size: 10pt;
}

但它没有选择性地影响。此外，它似乎是第一次检查条件，然后只对其余项目应用相同的设置。但是只有在名称太长的情况下才需要将font-size更改为更小。那么我做错了什么？感谢。

Answer 1

Try by using following code instead, but u must include jquery for it.

jsfiddle：http://jsfiddle.net/vH6G8/

Answer 2

你可以使用jquery filter

来做到这一点

$(".ItemTemplate > div").filter(function(){
    return ($(this).text().length > 5);
}).addClass('more_than5');
$(".ItemTemplate > div").filter(function(){
    return ($(this).text().length > 10);
}).removeClass('more_than5').addClass('more_than10');

<强> DEMO

JavaScript在ListView中亲自重新选择类

2 个答案: