2014-01-21 3 views
1

скрипку - http://jsbin.com/emerinA/1/editИспользуйте элемент текста в CSS семейства шрифтов

Я пытаюсь использовать текст якорей, расположенных в .grab-typography DIV и использовать его в качестве CSS семейства шрифтов этого отдельного якоря.

JQuery/JavaScript:

$('.grab-typography').find('a').css('font-family', $(this).text()); 

Вот HTML.

<div class="grab-typography"><br> 
    <a class="grab-serif" href="javascript:void(0)">serif</a> 
    <a class="grab-sans" href="javascript:void(0)">sans</a> 
    <a class="grab-arial" href="javascript:void(0)">arial</a> 
    <a class="grab-arial-black" href="javascript:void(0)">arial black</a> 
    <a class="grab-courier" href="javascript:void(0)">courier</a> 
    <a class="grab-comic-sans-ms" href="javascript:void(0)">comic sans ms</a> 
    <a class="grab-helvetica" href="javascript:void(0)">helvetica</a> 
    <a class="grab-impact" href="javascript:void(0)">impact</a> 
    <a class="grab-lucida-sans" href="javascript:void(0)">lucida sans</a> 
    <a class="grab-tahoma" href="javascript:void(0)">tahoma</a> 
    <a class="grab-times-new-roman" href="javascript:void(0)">times new roman 
    </a> 
    <a class="grab-verdana" href="javascript:void(0)">verdana</a> 
</div> 

html, если я добавлю к нему шрифт-face html. (Я хотел бы избежать этого как можно больше)

<div class="grab-typography"><br> 
    <a class="grab-serif" href="javascript:void(0)" title="serif"><font face="serif">serif</font></a> 
    <a class="grab-sans" href="javascript:void(0)" title="sans"><font face="sans">sans</font></a> 
    <a class="grab-arial" href="javascript:void(0)" title="arial"><font face="arial">arial</font></a> 
    <a class="grab-arial-black" href="javascript:void(0)" title="arial black"><font face="arial black">arial black</font></a> 
    <a class="grab-courier" href="javascript:void(0)" title="courier"><font face="courier">courier</font></a> 
    <a class="grab-comic-sans-ms" href="javascript:void(0)" title="comic sans ms"><font face="comic sans ms">comic sans ms</font></a> 
    <a class="grab-helvetica" href="javascript:void(0)" title="helvetica"><font face="helvetica">helvetica</font></a> 
    <a class="grab-impact" href="javascript:void(0)" title="impact"><font face="impact">impact</font></a> 
    <a class="grab-lucida-sans" href="javascript:void(0)" title="lucida sans"><font face="lucida sans">lucida sans</font></a> 
    <a class="grab-tahoma" href="javascript:void(0)" title="tahoma"><font face="tahoma">tahoma</font></a> 
    <a class="grab-times-new-roman" href="javascript:void(0)" title="times new roman"><font face="times new roman">times new roman</font> 
    </a> 
    <a class="grab-verdana" href="javascript:void(0)" title="verdana"><font face="verdana">verdana</font></a> 
</div> 

Мне не очень повезло.

Любая помощь очень ценится.

ответ

3

Попробуйте это:

$('.grab-typography').find('a').css('font-family', function() { 
    return $(this).text() 
}); 

jsFiddle example

+0

Спасибо, я не думаю о возвращении. –

-1

Вы можете просто захватить текст между тегами?

$('.grab-typography').find('a[title="' + $(this).text() + '"]').text(); 

Таким образом, вам не нужно беспокоиться о добавлении тегов

Пример испытания: http://jsfiddle.net/ktTh8/

+0

Вы протестировали это? – j08691

+1

Это не имеет никакого отношения к использованию текста в качестве элемента css font-family. Ваша демонстрация ищет название, которое также не расположено в html. –

Смежные вопросы