javascript - 替换每个在 jQuery 中不起作用

Question

我正在尝试用 jekyll 制作一个 css 样式指南，我现在有一个 jQuery 的小问题

基本上，我需要一个可以直接在事件页面中注入(inject)样式的函数。该解决方案看起来最适合我的元素。

我的函数适用于 1 个元素，但不适用于循环中的每个元素。我不明白为什么，我好像忽略了什么？

这是我的 html 标记

<div id="starterkit" class="field-style">

    <a href="#" title="Lien basique">Lien basique</a>
    <pre><code class="css">a {
    color: #6f6f6f;
    text-decoration: none;
}</code></pre>
    <hr/>

    <a href="#" title="Lien visité" class="link-visited">Lien visité</a>
    <pre><code class="css">a {
    color: #6f6f6f;
    text-decoration: none;
}</code></pre>
    <hr/>

    <a href="#" title="Lien hover" class="link-hovered">Lien hover</a>
    <pre><code class="css">a {
    color: #6f6f6f;
    text-decoration: underline;
}</code></pre>
    <hr/>

    <a href="#" title="Lien actif" class="link-active">Lien actif</a>
    <pre><code class="css">a {
    color: #6f6f6f;
    text-decoration: underline;
}</code></pre>
    <hr/>

    <a href="#" title="Lien focused" class="link-focused">Lien focused</a>
    <pre><code class="css">a {
    color: #6f6f6f;
    text-decoration: underline;
    outline: thin dotted;
}</code></pre>
    <hr/>

</div>

这是我的js

$(function() {
    $('.field-style a').each(function() {
        var base = $('this').next('pre').children('code').text();
        replaced = base.replace(/ |{|}|^a|\r?\n|\r/g,'');
        $('this').attr('style', replaced);
    })
});

Answer 1

您需要将 $('this') 替换为不带引号的 $(this)。 this 是保留关键字，引用当前对象。所以你的代码将是:

$(function() {
  $('.field-style a').each(function() {
    var base = $(this).next('pre').children('code').text();
    replaced = base.replace(/ |{|}|^a|\r?\n|\r/g,'');
    $(this).attr('style', replaced);
  })
});