CODEWITHSUNDEEP
javascriptjquerydom
Timothy Adams
Timothy Adams

Reputation: 211

jquery appending and prepending extra quotes

I have an 'about' section and I'm trying to pull quotes off to the side. I surround the text I want to pull off to the side with <span class='pq'>My quote is in here</span>. I have 3 instances where I pull quotes off to the side. The first instance adds 3 sets of quotes, the second adds 2 sets of quotes, and the 3rd and final adds the correct 1 set of quotes.

I'm still learning jQuery, but here's what I came up with:

$(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

Upvotes: 0

Views: 316

Answers (2)

Michael Pratt
Michael Pratt

Reputation: 3496

You're prepending and appending the spans on each .pullquote element on each iteration of the each() loop over the span.pq elements. You should instead put that code outside of the each(), as it will operate on every .pullquote element. Something like this (note: untested, may need changes):

$(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

Upvotes: 2

Daniel Imms
Daniel Imms

Reputation: 50189

For quotes there are actually 2 standard HTML tags for this that carry the sematic meaning of a quote, <q> for a short (inline) quote and <blockquote> for a longer quote. CSS pseudo-elements can be used to prepend and append a quote to each of these tags.

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:'"';
}

Upvotes: 1

Related Questions