Jquery : Concatenate Values From Two Elements

Question

bit stuck try to achieve something in Jquery and wondered if anyone can assist..

I am creating my own edit in place function, where you click on an edit button, and the content of my definition list gets swapped for a form...prefilled with data. Similar to this

All is fine apart from each editable section (user comments) is tagged, and can have multiple tags, much like here on stackoverflow...So my HTML to output the tag for each comment is as so

 <dl id='comment_id'>
  <dt class="comment title">#i.getsTitle()#</a></dt>
           // Other info
    <dd class="categories">
        <dl>
      <dt>Tags:</dt>
    <cfloop array="#i.getCategory()#" index="ii">
     <dd class="category"><a href="">#ii.getsCategory()#</a></dd>
 </cfloop>
  </dl>
   </dd>

So i nest my categories or tags in an a definition list, controlled by a loop.

What i have tried to do so far is grab the content of these catergories using Jquery, so that when you click to edit, the category form field will be prefilled with the existing tags for that comment....

$('.edit').click(function(){
  // Grab the text for all categories
 var sCategory = $(this).parents('dl').find('dd.categories dl dd.category').text();

 //Build a form and prefill the category form field with the sCategory Variable
 form + '' // Other Data to build form 
 form += '<dl><input name="sCategory" type="text" value="' + sCategory + '" /></dl>'

 // Show edit form prefilled with appropriate content
 $('dl#comment_id).(form);

This works, but it displays all the categories for that entry next to each other, with no spaces....eg "JqueryColdfusionValidation". Was wondering how to display it as so "JqueryColdfusionValidation"....Im guessing the .each function is required here, but a bit stuck on how to implement

Many thanks

Answer 1

Map() is good for this sort of thing. Try this:

var sCategory = $(this).parents('dl').find('dd.categories dl dd.category').map(function() {
  return $(this).text();
}).get().join(' ');

Answer 2

easiest way to add anything around:

var sCategory = '';
$(this).parents('dl').find('dd.categories dl dd.category').each(function(){
sCategory+=' '+$(this).text()+' ';
})