Question

我有一个'关于'部分，我试图将引号拉到一边。我用<span class='pq'>围绕我想要拉到一边的文字。我的引用在这里</span>。我有3个实例，我把引号拉到一边。第一个实例添加3组引号，第二个实例添加2组引号，第3个和最后添加正确的1组引号。

我还在学习jQuery，但这就是我想到的：

$(document).ready(function(){
    $('span.pq').each(function(){
        var quote = $(this).clone();
        quote.removeClass('pq');
        quote.addClass('pullquote');
        $(this).before(quote);
        $('.pullquote')
            .prepend('<span class="pq">&ldquo;</span>')
            .append('<span class="pq">&rdquo;</span>');
    })//end each
});//end ready

Answer 1

对于引号，实际上有2个标准HTML标签，其带有引号的语义含义，<q>用于短（内联）引用，<blockquote>用于较长引用。 CSS伪元素可用于在每个标记之前添加和附加引号。

jsFiddle

<强> HTML

<q>hello world</q>
<blockquote>A much longer quote... A much longer quote... A much longer quote... A much longer quote... A much longer quote...</blockquote>

<强> CSS

q:before,
q:after,
blockquote:before,
blockquote:after {
    content:'"';
}

Answer 2

在.pullquote元素的each()循环的每次迭代中，您在每个span.pq元素上添加和附加跨度。您应该将该代码放在each()之外，因为它将在每个.pullquote元素上运行。这样的事情（注意：未经测试，可能需要更改）：

$(document).ready(function(){
    $('span.pq').each(function(){
        var quote = $(this).clone();
        quote.removeClass('pq');
        quote.addClass('pullquote');
        $(this).before(quote);            
    })//end each
    $('.pullquote')
        .prepend('<span class="pq">&ldquo;</span>')
        .append('<span class="pq">&rdquo;</span>');
});//end ready

jquery附加并添加额外的引号

2 个答案: