Question

我想将图片附加到特定的单词，但找不到合适的CSS选择器。

我的网站有一部分显示从数据库中提取的数据，因此在某些单词中添加类或ID不是我的选择。 我需要css只是在页面上找到该单词（或在本例中为名称）的地方显示背景图片。

例如，在下面（从数据库中提取）：

<td class="data1"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Patrick</font></td>

我想添加一个名称为Patrick的背景图片。

我尝试了各种变体，

td[.table1 *='Parick'] { 
    background-image:url(../images/accept.png);

但这并没有让我任何地方。由于它不在<span>或<div>甚至是链接，我无法弄明白。如果您有任何想法或jQuery解决方法，请告诉我。谢谢！

Answer 1

如果可以保证名称只显示为元素中的唯一文本节点，则可以使用简单的jQuery选择器...

$(':contains("Patrick")').addClass('name');

jsFiddle

如果可能存在周围的空格和/或搜索应该不区分大小写，请尝试...

$('*').filter(function() {
    return $.trim($(this).text()).toLowerCase() == 'patrick';
}).addClass('name');

jsFiddle

如果您需要在任何文本节点中的任何位置找到该名称，然后您需要用元素包装它，请尝试...

$('*').contents().filter(function() {
    return this.nodeType == 3;
}).each(function() {
    var node = this;
    this.data.replace(/\bPatrick\b/i, function(all, offset) {
        var chunk = node.splitText(offset);
        chunk.data = chunk.data.substr(all.length);
        var span = $('<span />', {
            'class': 'name',
            text: all
        });
        $(node).after(span);
    });
});

jsFiddle

我建议使用第三个例子。

将图像附加到任何单词

1 个答案: