javascript - 将文本值匹配/分配给属性

一个简短的javasctipt / jquery脚本，用于将文本字符串值与html实体unicode值进行匹配/分配。 '＆＃58880'。

例如，以5个图标的unicode以开头的图标为例


（显示篮球的图标）
（显示网球的图标）
（显示板球的图标）
（显示排球的图标）
（显示基本球的图标）


html可能是这样的（注意：它们可以随时以任何顺序出现。）

<p><span data-icon="&#58883;"></span>Volleyball</p>
<p><span data-icon="&#58884;"></span>Baseball</p>
<p><span data-icon="&#58882;"></span>Cricket</p>
<p><span data-icon="&#58881;"></span>Tennis</p>
<p><span data-icon="&#58880;"></span>Basketball</p>

需要一种方法，以便无论何时出现文本字符串值（例如篮球），它都知道动态插入“数据图标”，并知道其数据图标值是什么（例如“＆＃58880”）等。

最佳答案

你可以做这样的事情。

这是一个小提琴供您参考：
http://jsfiddle.net/47kj4zzu/1/

的HTML

 <div id="sports">
        <p>Volleyball</p>
        <p>Baseball</p>
        <p>Cricket</p>
        <p>Tennis</p>
        <p>Basketball</p>
    </div>

jQuery / JavaScript

var icons = [
    {
        match: 'volleyball',
        unicode: ''
    },
        {
        match: 'baseball',
        unicode: ''
    },
    {
        match: 'cricket',
        unicode: ''
    },
    {
        match: 'tennis',
        unicode: ''
    },
    {
        match: 'basketball',
        unicode: ''
    }
];

var $sports = $('#sports').children('p');

$sports.each(function(){

    var $ele = $(this);

    $.each(icons, function(){

        if($ele.text().toLowerCase().indexOf(this.match.toLowerCase()) >= 0)
        {
            $ele.prepend('<span data-icon="'+this.unicode+'"></span>');
            return false;
        }
    });

});