Question

我试图用文字替换图像图标。以下是代码：

if ($('td:contains("<i class="fa fa-facebook-official cust-icon fb-color"></i>")')) {
    var elem = $('td:contains("<div class='text-center'><i class="fa fa-facebook-official cust-icon fb-color"></i></div>")');
    elem.html($.trim(elem.html()).replace("<div class='text-center'><i class='fa fa-facebook-official cust-icon fb-color'></i></div>", "Facebook"));
}

它不起作用。有什么问题？

早些时候我正在使用：

function changeToIcons() {
    if ($('td:contains("Facebook")')) {
        var elem = $('td:contains("Facebook")');
        elem.html($.trim(elem.html()).replace("Facebook", "<div class='text-center' value='Facebook'><i class='fa fa-facebook-official cust-icon fb-color'></i></div>"));
    }
}

此代码工作正常。现在，根据我的要求，我需要从图标替换为图像。

Answer 1

您可以使用find和replaceWith来简化代码，而不是使用包含选择器。

代码：

var $myTd = $('td');

var $myDiv = $myTd.find('div.text-center');

if ($myDiv.find('i.fa.fa-facebook-official.cust-icon.fb-color').length > 0) $myDiv.replaceWith('Facebook');

演示：http://jsfiddle.net/0ck9nn85/

Answer 2

  if ($('td:contains("<i class="fa fa-facebook-official cust-icon fb-color"></i>")')) {
       /* var elem = $('td:contains("<div class="text-center"><i class=fa fa-facebook-official cust-icon fb-color"></i></div>")');
        elem.html($.trim(elem.html()).replace("<div class='text-center'><i class='fa fa-facebook-official cust-icon fb-color'></i></div>", "Facebook"));*/

if ($('td').find('div.text-center').find('i.fa.fa-facebook-official.cust-icon.fb-color').length > 0){
$('td .text-center').has('i.fa.fa-facebook-official.cust-icon.fb-color').replaceWith('‌Facebook');
}
}

var elem = $('td:contains("<div class='text-center'＆lt; ----单引号破坏了脚本。

另一个主要问题：你没有正确选择DOM元素。

//由Regent提供

工作小提琴：http://jsfiddle.net/0ck9nn85/1/

Answer 3

如果你改变了

var elem = $('td:contains("<div class='text-center'><i class="fa fa-facebook-official cust-icon fb-color"></i></div>")');

到

 var elem = $('td:contains("<div class="text-center"><i class="fa fa-facebook-official cust-icon fb-color"></i></div>")');

文本中心的引号错误。

用文字替换图标

3 个答案: