使用 jQuery 根据 <label> 内容加载图标答案

【问题标题】：Using jQuery to load icon based on <label> contents使用 jQuery 根据 <label> 内容加载图标
【发布时间】：2014-10-17 10:29:34
【问题描述】：

我有一个网站，其内容是从数据库中动态加载的。每个标签的内容都不同。

一个可以生成为 General:，而另一个可以生成为 TV:。我的问题是，jQuery 有什么方法可以（基于标签的 HTML 输出）用字体真棒图标替换 NAME:？

例如：

<label>TV:</label>

会变成：

<i class="fa fa-film fa-2x"></i>

【问题讨论】：

该标签中除了文字还有其他内容吗？是的，它可以

标签： javascript jquery html css

【解决方案1】：

试试

var icons = {
    'tv:': 'film',
    'edit:': 'edit'
};

$('label').replaceWith(function () {
    var text = $(this).text().trim().toLowerCase(),
        icon = icons[text];
    return icon ? '<i class="fa fa-' + icon + ' fa-2x"></i>' : undefined;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">

<label>TV:</label>
<label>TsV:</label>
<label>EDIT:</label>

【讨论】：

这真的很好用，但我认为他的意思只是文本字符串而不是整个标签。
@Spokey OP 说 label 将 Would become: 所以我认为 OP 希望它被替换
非常感谢，这真的很好，正是我所追求的！感谢您的帮助

【解决方案2】：

您可以使用 :contains 选择器http://api.jquery.com/contains-selector/

$("label:contains('TV')").html('<i class="fa fa-film fa-2x"></i>');

【讨论】：

有趣且简洁的解决方案！但是，如果我有，例如，带有“red-tv”的标签，它也会被替换为 fa-film。但我不需要它。

【解决方案3】：

$("label:contains('TV')").html('<i class="YOUR CLASS"></i>');

或者，如果您可以在该标签中添加类或 id，您可以轻松更改它

 $("#ID").html('<i class="YOUR CLASS"></i>');

 $(".CLASS").html('<i class="YOUR CLASS"></i>');

【讨论】：

【解决方案4】：

例如，您可以用 JQuery 替换它们

var icons = {
    "TV:" : "film"
};

var $labels = $('label');
$labels.each(function(index){
    var icon = icons[$(this).text()];
    $(this).replaceWith($("<i>").addClass('fa').addClass('fa-' + icon).addClass('fa-2x'));
});

看看小提琴：http://jsfiddle.net/m19hjnoa/

【讨论】：

【解决方案5】：

你可以采取不同的方法。

我个人最喜欢的是从服务器发送正确的标签。

否则你可以运行这个 jQuery 脚本：http://jsfiddle.net/ehdgL6so/

// try to select as less elements as possible for speed
// for example if they are in a div with class foo try jQuery('div.foo label') instead
var labels = jQuery('label');

// loop throu all labels
labels.each(function() {
    // get single label element
    var label = jQuery(this);
    // get the content (for example "TV:"
    var labelContent = label.text();

    // replace if the label matches
    switch(labelContent) {
        case 'TV:':
            // if the label contains "TV:" replace the <label> with the <i> element
            label.replaceWith('<i class="fa fa-film fa-2x"></i>');
            break;
        case 'Foo':
            // if the label contains "Foo" replace foo with the <i> element
            label.html('<i class="fa fa-film fa-2x"></i>');
            break;
    } 
});

编辑：或者正如@cforcloud 建议的那样的简短形式

// note: .html does just replace the string "TV:" but leaves the label element in the DOM, while replaceWith is the way to replace an element
// http://api.jquery.com/replacewith/
jQuery("label:contains('TV:')").replaceWith('<i class="fa fa-film fa-2x"></i>');

【讨论】：