1

在我的共享点页面中，我需要一个多选字段。我想用图标替换该文本。

现在，我想出了这个确实可以工作的 jquery 函数。问题是它在页面加载后运行，并使页面在完成之前无响应。

正如你所看到的，它遍历每个带有类的元素.ms-vb2并检查它的文本是否与其中一个字符串匹配，然后删除该字符串，但提供一个类。我将用背景图像图标填充该类的 css。

有一个更好的方法吗？如果有更好的方法，我不喜欢 jQuery。否则，也许有更好的方法来编写这个函数？

function setRatingsStyles(){
    var ClassName = ".ms-vb2";
    //var ClassName = ".RatingsCSStoken";
    var ratingscale1 = [];
    ratingscale1[1] = "(1) Go";
    ratingscale1[2] = "(2) Warning";
    ratingscale1[3] = "(3) Stop";

    $(ClassName).each(function (){
         for(i=0;i < ratingscale1.length; i++){
            //$(ClassName).text(ratingscale1[i]).addClass("statusRating" + i).text("");     //we are replacing the text with an icon
            $((ClassName) + ":contains('" + ratingscale1[i] + "')").addClass("statusRating" + i).text("");      //we are replacing the text with an icon
         }
    });

}

这是我从 Firebug 中提取的截断片段（我删除了表单标签上方和下方的所有内容，以及脚本标签；这些...只是示例不需要的属性）：

<div>
<div>
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle" style="height: 44px;">
<div id="s4-workspace" class="s4-nosetwidth" style="height: 737px;">
<div id="s4-bodyContainer" style="width:2010px!important">
<div id="ctl00_MSO_ContentDiv">
<div id="powerstrip" class="s4-notdlg">
<div id="toplinkbar" class="s4-notdlg">
<div class="s4-notdlg">
<div id="s4-leftpanel" class="s4-notdlg">
<div id="pagebody" class="s4-ca">
<div id="pagebodytitle" class="s4-notdlg">
<div id="pageholder">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="MSOZoneCell_WebPartWPQ2" class="s4-wpcell-plain" ...">
<table class="s4-wpTopTable" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top">
<div id="WebPartWPQ2" class="noindex" style="" allowexport="false" allowdelete="false" width="100%" ...>
<span></span>
<table width="100%" cellspacing="0" cellpadding="0" border="0" ...>
<tbody>
<tr>
<td>
<iframe id="FilterIframe20" ...>
<table id="{...}" class="ms-listviewtable" width="100%" cellspacing="0" cellpadding="1" border="0" ...>
<tbody>
<tr class="ms-viewheadertr ms-vhltr" valign="top">
<tr class="ms-itmhover" iid="20,4,0" setedgeborder="true">
<td class="ms-vb-itmcbx ms-vb-firstCell">
<td class="ms-vb2"></td>
<td class="ms-vb2">
<td class="ms-vb2">Georgetown IL</td>
<td class="ms-vb-title" height="100%" onmouseover="OnChildItem(this)">
<td class="ms-vb2">Renovation</td>
<td class="ms-vb2">Active</td>
<td class="ms-vb2">Bob Newhart</td>
<td class="ms-vb-user"></td>
<td class="ms-vb2">
<td class="ms-vb2 rating4">(4) High</td>
<td class="ms-vb2">
**...repeated over and over....**
<td class="ms-vb2">(1) Go</td>
<td class="ms-vb2">(2) Warning</td>
<td class="ms-vb2">(3) Stop</td>
<td class="ms-vb2">(1) Go</td>
<td class="ms-vb2">Office</td>
<td class="ms-vb-user">
<td class="ms-vb2 ms-vb-lastCell">
</tr>
<tr class="ms-alternating ms-itmhover" iid="20,6,0" setedgeborder="true">
<tr class="ms-itmhover" iid="20,8,0" setedgeborder="true">
**...repeated over and over....**
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
<table class="ms-bottompaging" width="100%" cellspacing="0" cellpadding="0" border="0" ...">
<table id="Hero-WPQ2" width="100%" cellspacing="0" cellpadding="0" border="0" ...>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="masterfooter" class="s4-notdlg" style="clear: both;">
<div id="DeveloperDashboard" class="ms-developerdashboard"> </div>
</div>
</div>
</div>
4

2 回答 2

1

现在，您正在循环这些类项至少 4 次（一次在外循环中，三次在内循环中）。您应该将循环切换为更像以下内容：

$(ClassName).each(function (){
  var $this = $(this);
  var i = $.inArray($this.text(), ratingscale1);
  if(i >= 0) {
    $this.addClass("statusRating" + i).text("");
  }
});

我不确定这是否是理想的，因为它仍然有你循环过多的负面影响。它比你所拥有的要好。理想情况下，您将控制生成的 HTML 并将类名放入其中。

于 2012-12-16T03:45:26.913 回答
0

一些可以显着提高性能的建议：

让服务器代码向包含文本中值的类添加data-属性。.ms-vb2这将有助于避免使用:contains需要正则表达式解析文本的选择器。如果元素有值，则仅在服务器代码中添加data-属性以避免循环空元素。

<td class="ms-vb2" data-rating="(1) Go">(1) Go</td>

将整个类缓存在变量中以避免多次搜索 DOM：

var $ratings=$('td .ms-vb2[data-rating]');

循环ratingscale1数组并使用filter()方法从先前缓存的对象中创建适当元素的集合：

 for(i=0; i= ratingscale1.length;i++){
     $ratings.filter(function(){
           return $(this).data('rating') == ratingscale1[i];
     }).addClass("statusRating" + i).text("");
 }

在编写此代码时考虑了所有这些之后……您可以在服务器上添加类并删除文本，这也比在 DOM 中更快，并且在页面加载时呈现 CSS 时会存在类。

于 2012-12-16T06:26:38.057 回答