JavaScript在ListView中亲自重新选择类

JavaScript reselect class personally in ListView

本文关键字：选择 新选择 ListView JavaScript      更新时间：2023-09-26

我正在使用我的模板创建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;
}

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

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

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

您可以使用jquery的过滤器来完成此操作

$(".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

相关文章：