jQuery wrap only around string

Question

I'm working on some jQuery code to turn:

<blockquote>
  Quote
  <cite>Author</cite>
</blockquote>

into:

<blockquote>
  <q>Quote</q>
  <cite>Author</cite>
</blockquote>

So far I've been trying to loop through each block quote, detach the <cite> element, use jQueries wrapInner function to wrap the remaining string in the <q> element, then reattach the <cite> element.

The ultimate goal is to do something like this <http://24ways.org/2005/swooshy-curly-quotes-without-images/>. Except using jQuery to automate the placement of .bqstart & .bqend.

Are you asking how to wrap a q tag around the non-marked-up string within a blockquote element? — Jared Farrish
– Jared Farrish, Commented Jul 26, 2014 at 23:53
Here is something approximating what is going on in your URL: jsfiddle.net/532At/2 Note the .bqstart/.bqend are not really necessary; this could be done directly with q:before and q:after. — Jared Farrish
– Jared Farrish, Commented Jul 27, 2014 at 0:12

Ram · Accepted Answer · 2014-07-26 23:59:58Z

4

You can check the nodeType property of the childNodes, if the value is 3, then the node is a textNode.

$('blockquote').contents().filter(function() {
   return this.nodeType === 3 && $.trim(this.nodeValue).length;
}).wrap('<q/>');

answered Jul 26, 2014 at 23:59

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

webketje · Accepted Answer · 2014-07-27 00:23:58Z

If your blockquote elements all have the same structure it's pretty easy to do. Providing the answer in plain JS/ no jQuery. Benefit over string methods like Faiz' answer is that it's non-destructive, so it's (marginally) faster (browser doesn't need to rebuild the DOM) & it preserves data bound to the element (ie, event listeners)

function wrapQuotes() {
  var quotes = document.getElementsByTagName('blockquote'), quote, qEl;
  for (var i = 0; i < quotes.length; i++) {
    quote = quotes[i].firstChild;
    // if the structure is always the same, you can leave out this if clause
    if (quote.nodeType === 3) { 
      qEl = document.createElement('q');
      qEl.appendChild(quote); // or .childNodes[0]
      quotes[i].insertBefore(qEl, quotes[i].firstChild);
    }
  }
}
wrapQuotes();

Jared Farrish · Accepted Answer · 2014-07-26 23:59:45Z

0

I'm guessing a little bit here, but are you wanting:

$('blockquote')
    .wrapInner('<q>')
    .find('cite')
    .each(function ea(){
        $(this).appendTo($(this).closest('blockquote'));
    });

http://jsfiddle.net/532At/

answered Jul 26, 2014 at 23:59

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Collectives™ on Stack Overflow

jQuery wrap only around string

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related