1

私の共有ポイント ページには、複数選択フィールドが必要です。そのテキストをアイコンに置き換えたい。

さて、実際に機能するこのjquery関数を思いつきました。問題は、ページが読み込まれた後に実行され、終了するまでページが応答しなくなることです。

ご覧のとおり、クラスが.ms-vb2and のすべての要素をループ処理して、テキストがいずれかの文字列と一致するかどうかを確認し、文字列を削除しますが、クラスを提供します。そのクラスの 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回ループしています（外側のループで1回、内側のループで3回）。ループを次のようなものに切り替える必要があります。

$(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 に答える