jQuery选项卡：将DIV添加到面板

我很难找到答案。我有以下addTab函数，它使用一组参数来构建要添加的新选项卡：

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);
  });
}

tab_计数器=4；
window.addTab=函数addTab（标题、url、附加）{
//添加新选项卡
var tabId=title.toLowerCase（）；
tabId=tabId.replace（“，”）；
变量$tabs=$（'#tabs'）。tabs({
选项卡模板：“
”，
添加：功能（事件、用户界面）{
var数据字符串=额外；
$.ajax({
键入：“GET”，
url:url，
数据：dataString，
数据类型：“xml”，
cache:false，
成功：函数（xml）{
var maxDistance=额外；
_parseMatches（xml、ui、maxDistance）；
}
});
}
});
var tab_title=标题；
$tabs.tabs（'add'，'#'+tabId，tabu title）；
tab_计数器++；
}
函数_parseMatches（xml、ui、maxDistance）{
$（ui.panel）.append（'最大距离：'）；
$（xml）.find（'waypoint'）.each（函数（）{
var lat=$（this.attr（'latitude'）；
var lng=$（this.attr（'longitude'）；
var distance=$（this.attr（'distance'）；
var html=$（''）
.附加（“”+lat+“”）
.附加（“”+lng+“”）
.附加（“”+距离+“”）；
$（ui.panel）.append（html）；
});
}

这个很好用。我得到了我所期望的结果——为了这个例子，我将简化输出。表4是此处新建的内容：

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

...
...
...
最大距离。。。。
...
...
...
... 上面列出的更多匹配项。。。
...
我希望我理解正确，您只是想用另一个div来包装#match_xxx元素

查看jQuery的方法

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

$（“.items”）.wrap（“”）；

我使用了类而不是ID，因为如果要包装多个项目，则会有重复的ID，这是无效的标记。
我不想包装每个单独的匹配项。返回的XML包含多条记录，每条记录生成您在上面的HTML示例中看到的内容。我需要一个关于整个事情的DIV，而不仅仅是每个片段。回答了我自己的问题。。。我需要.wrapAll（）而不是.wrap（）。谢谢你让我走上了正确的道路！
 <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>

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