すべてのCSSスプライトクラスをページに含める

Question

私はFamFamFam Silkアイコンセットをスプライトにしました。すべてのアイコンをHTMLページに表示したいと思います。問題は、1000個のアイコンが2つの.png画像に分割され、それぞれの画像がそれ自身のクラスを持つことです。たとえば、最初のアイコンはclass="silk1 ad-accept"で、最後のアイコンは2番目の.pngイメージにあり、class="silk2 ad-zoom-in"になります。とにかく、過ごした時間や可能性のある間違いはもちろんのこと、手作業でやってみるのは夢中です。

私の質問は、jQueryで自動的に行うことができますか？基本的には、私は各CSSスプライトクラスをとり、liのような要素に適用するスクリプトが必要です。それは、それが使用したクラスのタイトルも適用すると非常に役に立ちます。したがって、どのアイコンがどのアイコンであるかわかります。

Answer 1

jQueryのaddClassメソッドを使用して、任意の要素のセットにクラスを追加できます。

$(function(){ 
    $(#ads li).addClass('silk1 ad-accept'); 
}); 

あなたは実際にサイト全体で1000個のアイコンを使用していますか？あなたのすべての使用が少数のアイコンであれば、それはかなりのオーバーヘッドのようです。理想的にはスプライトの要求は少ないので、スプライトのパフォーマンスは向上しますが、800kbのスプライトに対しては8kbのアイコンに対する要求が1回よりもはるかに高速です。あなたが検討したいと思うかもしれない何か...

Answer 2

これはあなたの後のものですか？

for (var i = 0; i < document.styleSheets.length; i++) { 
    var styleSheet = document.styleSheets[i]; 
    for (var j = 0; j < styleSheet.cssRules.length; j++) { 
     var rule = styleSheet.cssRules[j]; 
     if (/^\.silk\d+\./.test(rule.selectorText)) { 
      var classNameParts = /\.(silk\d+)\.(.*)$/.exec(rule.selectorText); 
      var element = document.createElement('DIV'); 
      element.className = classNameParts[1] + ' ' + classNameParts[2]; 
      element.appendChild(document.createTextNode(element.className)); 
      document.body.appendChild(element); 
     } 
    } 
}​ 

例： http://jsfiddle.net/ddAcY/