jQuery Tabs : Adding DIV to panel

Question

I'm having a hard time trying to figure this out. I have the following addTab function, which takes a set number of arguments to build the new tab to be added:

tab_counter = 4;
window.addTab = function addTab(title, url, extra) {
  // Add a new tab
  var tabId = title.toLowerCase();
  tabId = tabId.replace(" ", "_");
  var $tabs = $('#tabs').tabs({
    tabTemplate: '<li><a id="#' + tabId + '" href="#{href}">#{label}</a></li>',
    add: function(event, ui) {
      var dataString = extra;
      $.ajax({
        type: 'GET',
        url: url,
        data: dataString,
        dataType: 'xml',
        cache: false,
        success: function(xml) {
          var maxDistance = extra;
          _parseMatches(xml, ui, maxDistance);
        }
      });
    }
  });
  var tab_title = title;
  $tabs.tabs('add', '#'+tabId, tab_title);
  tab_counter++;
}

function _parseMatches(xml, ui, maxDistance) {
  $(ui.panel).append('Maximum Distance: <input type="text" name="radius" id="radius" maxlength="1" size="1" value="' + maxDistance + '" />');
  $(xml).find('waypoint').each(function() {
    var lat      = $(this).attr('latitude');
    var lng      = $(this).attr('longitude');
    var distance = $(this).attr('distance');
    var html     = $('<div class="items" id="match_'+uid+'"></div>')
                   .append('<span class="sItem" id="sLat">' + lat      + '</span>')
                   .append('<span class="sItem" id="sLng">' + lng      + '</span>')
                   .append('<span class="sItem" id="sDis">' + distance + '</span>');
    $(ui.panel).append(html);
  });
}

This works fine. I get what I'm expecting it to do - for the sake of this example, I will simplify the output. Tab 4 is what's being created a-new here:

<div id="tabs">
 <div id="tab-1">...</div>
 <div id="tab-2">...</div>
 <div id="tab-3">...</div>
 <div id="tab-4">
  Maximum Distance ....
  <div id="match_XXX" class="items">
   <span id="sLat" class="sItem>...</span>
   <span id="sLng" class="sItem>...</span>
   <span id="sDis" class="sItem>...</span>
  </div>
  ... list of more matches like above ...
 </div>
</div>

My problem is that I need to wrap the whole thing inside of another div, looking at the tab in question, I want it to look like this when done:

 <div id="tab-4">
  Maximum Distance ....
  <div id="new_div">  <-- start new div wrap here
   <div id="match_XXX" class="items">
    <span id="sLat" class="sItem>...</span>
    <span id="sLng" class="sItem>...</span>
    <span id="sDis" class="sItem>...</span>
   </div>
   ... list of more matches like above ...
  </div>  <-- end div here
 </div>

I tried adding $(ui.panel).append() before and after the .each() loop in_parseMatches(), but the resulting HTML just puts both at the same level, resulting in this:

 <div id="tab-4">
  Maximum Distance ....
  <div id="new_div"></div>  <-- starts and ends here
  <div id="match_XXX" class="items">
   <span id="sLat" class="sItem>...</span>
   <span id="sLng" class="sItem>...</span>
   <span id="sDis" class="sItem>...</span>
  </div>
  ... list of more matches like above ...
 </div>

Anyone have any suggestions? Using jQuery 1.4.2 and jQueryUI 1.8.3. Hope I included all relevant information. If not, feel free to ask ...

Thanks!

Answer 1

I hope I understand correctly, you just want to wrap the #match_xxx element with another div?

Check out jQuery's wrap() method.

$(".items").wrap('<div class="some-class" />');

I've used a class instead of an ID, because if you're going to wrap multiple items, you would have duplicate ID's, which is invalid markup.