javascript - 使用 jQuery 呈现随机字体图标(列表中的随机字符串)？

Question

我在网页的多个位置生成一个随机图标。为了设置这些图标的样式，我使用了 Font Awesome作为列表。查看该链接，您可以看到每个图标都由样式为 <i class="icon-[some-string]"></i> 的类表示

目标是能够将代码放在页面上，然后使用 jQuery 将 [some-string] 与该列表中的选项一起填充。所以一些伪示例如:

<ul class="random-list">
  [for i]
    <li class="list-item"><i class="icon-string"></i></li>
    // Other content
  [end]
</ul>

然后我会使用 jQuery 来更改选项列表中的字符串。我只是不知道该怎么做，如何创建对象数组，或者如何操作动态添加的项目。由于它们像上面的示例一样动态添加，我想我应该在它们生成时进行字符串替换，而不是在页面加载后进行替换？这样做的过程是什么？我正在使用一个正在加载一些 block 的模板，我想在每个 block 之前包含随机图标。或者，如果更简单，我可以在每个 block 之前添加一个随机图标，但是，由于它们是由模板动态生成的，这会带来它自己的问题。

1) 如何实现示例中的随机图标(基于模板)2) 或者，如果事后这样做更容易，我如何为每个 block 添加一个随机图标？

对于这个问题，任何一个答案都可以。

Answer 1

$(document).ready(function() {
    var iconArray = new Array(
        "icon-compass",
      "icon-collapse",
      "icon-collapse-top",
      "icon-expand",
      "icon-eur",
      "icon-euro",
      "icon-gbp",
      "icon-usd",
      "icon-dollar",
      "icon-inr",
      "icon-rupee",
      "icon-jpy",
      "icon-yen",
      "icon-cny",
      "icon-renminbi",
      "icon-krw",
      "icon-won",
      "icon-btc",
      "icon-bitcoin",
      "icon-file",
      "icon-file-text",
      "icon-sort-by-alphabet",
      "icon-sort-by-alphabet-alt",
      "icon-sort-by-attributes",
      "icon-sort-by-attributes-alt",
      "icon-sort-by-order",
      "icon-sort-by-order-alt",
      "icon-thumbs-up",
      "icon-thumbs-down",
      "icon-youtube-sign",
      "icon-youtube",
      "icon-xing",
      "icon-xing-sign",
      "icon-youtube-play",
      "icon-dropbox",
      "icon-stackexchange",
      "icon-instagram",
      "icon-flickr",
      "icon-adn",
      "icon-bitbucket",
      "icon-bitbucket-sign",
      "icon-tumblr",
      "icon-tumblr-sign",
      "icon-long-arrow-down",
      "icon-long-arrow-up",
      "icon-long-arrow-left",
      "icon-long-arrow-right",
      "icon-apple",
      "icon-windows",
      "icon-android",
      "icon-linux",
      "icon-dribbble",
      "icon-skype",
      "icon-foursquare",
      "icon-trello",
      "icon-female",
      "icon-male",
      "icon-gittip",
      "icon-sun",
      "icon-moon",
      "icon-archive",
      "icon-bug",
      "icon-vk",
      "icon-weibo",
      "icon-renren",
      "icon-adjust",
      "icon-anchor",
      "icon-archive",
      "icon-asterisk",
      "icon-ban-circle",
      "icon-bar-chart",
      "icon-barcode",
      "icon-beaker",
      "icon-beer",
      "icon-bell",
      "icon-bell-alt",
      "icon-bolt",
      "icon-book",
      "icon-bookmark",
      "icon-bookmark-empty",
      "icon-briefcase",
      "icon-bug",
      "icon-building",
      "icon-bullhorn",
      "icon-bullseye",
      "icon-calendar",
      "icon-calendar-empty",
      "icon-camera",
      "icon-camera-retro",
      "icon-certificate",
      "icon-check",
      "icon-check-empty",
      "icon-check-minus",
      "icon-check-sign",
      "icon-circle",
      "icon-circle-blank",
      "icon-cloud",
      "icon-cloud-download",
      "icon-cloud-upload",
      "icon-code",
      "icon-code-fork",
      "icon-coffee",
      "icon-cog",
      "icon-cogs",
      "icon-collapse",
      "icon-collapse-alt",
      "icon-collapse-top",
      "icon-comment",
      "icon-comment-alt",
      "icon-comments",
      "icon-comments-alt",
      "icon-compass",
      "icon-credit-card",
      "icon-crop",
      "icon-dashboard",
      "icon-desktop",
      "icon-download",
      "icon-download-alt",
      "icon-edit",
      "icon-edit-sign",
      "icon-ellipsis-horizontal",
      "icon-ellipsis-vertical",
      "icon-envelope",
      "icon-envelope-alt",
      "icon-eraser",
      "icon-exchange",
      "icon-exclamation",
      "icon-exclamation-sign",
      "icon-expand",
      "icon-expand-alt",
      "icon-external-link",
      "icon-external-link-sign",
      "icon-eye-close",
      "icon-eye-open",
      "icon-facetime-video",
      "icon-female",
      "icon-fighter-jet",
      "icon-film",
      "icon-filter",
      "icon-fire",
      "icon-fire-extinguisher",
      "icon-flag",
      "icon-flag-alt",
      "icon-flag-checkered",
      "icon-folder-close",
      "icon-folder-close-alt",
      "icon-folder-open",
      "icon-folder-open-alt",
      "icon-food",
      "icon-frown",
      "icon-gamepad",
      "icon-gear",
      "icon-gears",
      "icon-gift",
      "icon-glass",
      "icon-globe",
      "icon-group",
      "icon-hdd",
      "icon-headphones",
      "icon-heart",
      "icon-heart-empty",
      "icon-home",
      "icon-inbox",
      "icon-info",
      "icon-info-sign",
      "icon-key",
      "icon-keyboard",
      "icon-laptop",
      "icon-leaf",
      "icon-legal",
      "icon-lemon",
      "icon-level-down",
      "icon-level-up",
      "icon-lightbulb",
      "icon-location-arrow",
      "icon-lock",
      "icon-magic",
      "icon-magnet",
      "icon-mail-forward",
      "icon-mail-reply",
      "icon-mail-reply-all",
      "icon-male",
      "icon-map-marker",
      "icon-meh",
      "icon-microphone",
      "icon-microphone-off",
      "icon-minus",
      "icon-minus-sign",
      "icon-minus-sign-alt",
      "icon-mobile-phone",
      "icon-money",
      "icon-moon",
      "icon-move",
      "icon-music",
      "icon-off",
      "icon-ok",
      "icon-ok-circle",
      "icon-ok-sign",
      "icon-pencil",
      "icon-phone",
      "icon-phone-sign",
      "icon-picture",
      "icon-plane",
      "icon-plus",
      "icon-plus-sign",
      "icon-plus-sign-alt",
      "icon-power-off",
      "icon-print",
      "icon-pushpin",
      "icon-puzzle-piece",
      "icon-qrcode",
      "icon-question",
      "icon-question-sign",
      "icon-quote-left",
      "icon-quote-right",
      "icon-random",
      "icon-refresh",
      "icon-remove",
      "icon-remove-circle",
      "icon-remove-sign",
      "icon-reorder",
      "icon-reply",
      "icon-reply-all",
      "icon-resize-horizontal",
      "icon-resize-vertical",
      "icon-retweet",
      "icon-road",
      "icon-rocket",
      "icon-rss",
      "icon-rss-sign",
      "icon-screenshot",
      "icon-search",
      "icon-share",
      "icon-share-alt",
      "icon-share-sign",
      "icon-shield",
      "icon-shopping-cart",
      "icon-sign-blank",
      "icon-signal",
      "icon-signin",
      "icon-signout",
      "icon-sitemap",
      "icon-smile",
      "icon-sort",
      "icon-sort-by-alphabet",
      "icon-sort-by-alphabet-alt",
      "icon-sort-by-attributes",
      "icon-sort-by-attributes-alt",
      "icon-sort-by-order",
      "icon-sort-by-order-alt",
      "icon-sort-down",
      "icon-sort-up",
      "icon-spinner",
      "icon-star",
      "icon-star-empty",
      "icon-star-half",
      "icon-star-half-empty",
      "icon-star-half-full",
      "icon-subscript",
      "icon-suitcase",
      "icon-sun",
      "icon-superscript",
      "icon-tablet",
      "icon-tag",
      "icon-tags",
      "icon-tasks",
      "icon-terminal",
      "icon-thumbs-down",
      "icon-thumbs-down-alt",
      "icon-thumbs-up",
      "icon-thumbs-up-alt",
      "icon-ticket",
      "icon-time",
      "icon-tint",
      "icon-trash",
      "icon-trophy",
      "icon-truck",
      "icon-umbrella",
      "icon-unchecked",
      "icon-unlock",
      "icon-unlock-alt",
      "icon-upload",
      "icon-upload-alt",
      "icon-user",
      "icon-volume-down",
      "icon-volume-off",
      "icon-volume-up",
      "icon-warning-sign",
      "icon-wrench",
      "icon-zoom-in",
      "icon-zoom-out",
      "icon-bitcoin",
      "icon-btc",
      "icon-cny",
      "icon-dollar",
      "icon-eur",
      "icon-euro",
      "icon-gbp",
      "icon-inr",
      "icon-jpy",
      "icon-krw",
      "icon-renminbi",
      "icon-rupee",
      "icon-usd",
      "icon-won",
      "icon-yen",
      "icon-align-center",
      "icon-align-justify",
      "icon-align-left",
      "icon-align-right",
      "icon-bold",
      "icon-columns",
      "icon-copy",
      "icon-cut",
      "icon-eraser",
      "icon-file",
      "icon-file-alt",
      "icon-file-text",
      "icon-file-text-alt",
      "icon-font",
      "icon-indent-left",
      "icon-indent-right",
      "icon-italic",
      "icon-link",
      "icon-list",
      "icon-list-alt",
      "icon-list-ol",
      "icon-list-ul",
      "icon-paper-clip",
      "icon-paperclip",
      "icon-paste",
      "icon-repeat",
      "icon-rotate-left",
      "icon-rotate-right",
      "icon-save",
      "icon-strikethrough",
      "icon-table",
      "icon-text-height",
      "icon-text-width",
      "icon-th",
      "icon-th-large",
      "icon-th-list",
      "icon-underline",
      "icon-undo",
      "icon-unlink",
      "icon-angle-down",
      "icon-angle-left",
      "icon-angle-right",
      "icon-angle-up",
      "icon-arrow-down",
      "icon-arrow-left",
      "icon-arrow-right",
      "icon-arrow-up",
      "icon-caret-down",
      "icon-caret-left",
      "icon-caret-right",
      "icon-caret-up",
      "icon-chevron-down",
      "icon-chevron-left",
      "icon-chevron-right",
      "icon-chevron-sign-down",
      "icon-chevron-sign-left",
      "icon-chevron-sign-right",
      "icon-chevron-sign-up",
      "icon-chevron-up",
      "icon-circle-arrow-down",
      "icon-circle-arrow-left",
      "icon-circle-arrow-right",
      "icon-circle-arrow-up",
      "icon-double-angle-down",
      "icon-double-angle-left",
      "icon-double-angle-right",
      "icon-double-angle-up",
      "icon-hand-down",
      "icon-hand-left",
      "icon-hand-right",
      "icon-hand-up",
      "icon-long-arrow-down",
      "icon-long-arrow-left",
      "icon-long-arrow-right",
      "icon-long-arrow-up",
      "icon-backward",
      "icon-eject",
      "icon-fast-backward",
      "icon-fast-forward",
      "icon-forward",
      "icon-fullscreen",
      "icon-pause",
      "icon-play",
      "icon-play-circle",
      "icon-play-sign",
      "icon-resize-full",
      "icon-resize-small",
      "icon-step-backward",
      "icon-step-forward",
      "icon-stop",
      "icon-youtube-play",
      "icon-ambulance",
      "icon-h-sign",
      "icon-hospital",
      "icon-medkit",
      "icon-plus-sign-alt",
      "icon-stethoscope",
      "icon-user-md"
    );
    var randIcon = Math.floor(Math.random()*(iconArray.length));
    $('.icon-front').append("<i class='" + iconArray[randIcon] + "'></i>");
    console.log(randIcon);
});

似乎可以解决问题，但是，让它在动态元素上工作将需要延迟或其他东西，除非我能想到这个片段在元素创建模板中运行......