javascript - 获取 :before content and printing special characters from content

Question

我想从我的 :before 标签中获取 content。我知道有些人会说它不是真正的(伪)元素，但在 JS 中有一种方法，但有人可以帮助我在 JQ 中做到这一点，因为我有多个标签并且我想用 $.each...

这是我如何在 JS 中获取 content

window.getComputedStyle(document.querySelector('i'), ':before').getPropertyValue('content')

我如何在 JQ 中执行此操作？

这是我尝试过的:

$.each($('div'),function(){
 $(this).find('i:before').css('content');
});

打印一个特殊字符？

当我得到 content 时，我想打印它，问题是它是一个特殊字符，我想得到一个真实的代码。

我的内容有这样的代码:\e002。所以我想像那样打印它，而不是。

Answer 1

迭代 $.each($('div i') 而不是 $.each($('div')，这样你就可以避免使用 find() 在迭代器中。

然后您可以在 this 上使用您的 window.getComputedStyle() 代码:

window.getComputedStyle(this, ':before').getPropertyValue('content')

然后您将得到一个 Unicode 字符串，这将我们带到问题的第二部分。

您可以使用 charCodeAt() 逐个字符地查看此字符串，这为 \e002 提供以下内容:

• 34
• 57346
• 34

34代表双引号，可以忽略。

57346 是十六进制 e002 的十进制等价物。您可以使用 toString(16) 将其转换为十六进制。

剩下的就是在前面加上\。

所以我们的代码变成了:

$.each($('div i'),function() {
  var s = window.getComputedStyle(this, ':before').getPropertyValue('content'),
      char = '\\' + s.charCodeAt(1).toString(16);

  console.log(char);  // \e002
});

片段:

$.each($('div i'),function() {
  var s = window.getComputedStyle(this, ':before').getPropertyValue('content'),
      char = '\\' + s.charCodeAt(1).toString(16);
  
  console.log(char);  // \e002
});

i:before {
  content: '\e002';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <i>Our italic node</i>
</div>