Прикрепить изображение к любому слову - PullRequest
Новая
       12

Прикрепить изображение к любому слову

0 голосов
/ 07 марта 2012

Я хотел бы прикрепить изображения к определенным словам, но не могу найти правильный селектор CSS для этого.

У меня есть часть моего сайта, которая отображает данные по мере их извлечения из базы данных, поэтому добавление классов или идентификаторов к определенным словам мне не подходит. Мне нужно, чтобы 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, пожалуйста, дайте мне знать. Спасибо!

1 Ответ

1 голос
/ 07 марта 2012

Если вы можете гарантировать, что имена отображаются только как единственные текстовые узлы в элементах, вы можете использовать простой селектор 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 .

Я бы порекомендовал использоватьтретий пример.

...