使用jQuery获取Font Awesome图标值？

Question

我在我的一个Web应用程序中使用Font Awesome。我想获取带有Font Awesome类的元素的值，然后执行更多操作。这可能吗？

例如，这里是一个可点击的网格，可以进行可能的选择：

'图标'是用以下HTML定义的：

<span class="icon icon-caret-down pointer-img"></span>

以下是相关的CSS代码：

.icon-caret-down:before     {content:"\f0d7";}

问题在于该值是使用CSS设置的。针对这种情况，jQuery选择器将会是什么？

$(".pointer-img").click(function(){
   console.log( $(this) );
});

Thanks in advance.

- Joel Murphy

---

它只会记录问题中的span元素。使用jQuery无法选择伪元素。 - Sushanth --

Answer 1

我最近发现了一个有用的代码片段，但还没有尝试过：

var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

或者更多基于jQuery跨浏览器的风味：

var content = window.getComputedStyle(
    $('.element').get(0), ':before'
).getPropertyValue('content');

看起来它能够工作...在某种程度上： 演示

- nirazul

---

成功了！这是一个绝对棒的答案！非常感谢你，伙计:D - Joel Murphy

请注意，可能会存在一些跨浏览器的问题。这似乎在IE8中无法运行。 - nirazul

是的，我现在只是在几个不同的浏览器中测试它。只要它在 Chrome 中可以工作，我就满意了！ - Joel Murphy

@Nirazul，当我使用fontawesome时，我可以获取内容。请看这里http://jsfiddle.net/91vg7vtt/。告诉我出了什么问题。 - Purushoth

Answer 2

这里是解决方案，以防有人需要（感谢Nirazul！）

$(".pointer-img").click(function(){
   var content = window.getComputedStyle(
      $($(this)).get(0), ':before'
   ).getPropertyValue('content');
   console.log(content)
});

- Joel Murphy