Question

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

现在，我想出了这个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>

Answer 1

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

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

我不确定这是否理想，因为它仍然有一个负面因素，你正在循环过多。它比你拥有的要好。理想情况下，您将控制生成的HTML并将类名放在那里。

Answer 2

一些可以显着改善效果的建议：

让服务器代码向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时类将存在。

是否有更好的方法来根据其包含的文本查找和替换类？

2 个答案: