jQuery Tabs：将DIV添加到面板

Question

我很难弄清楚这一点。我有以下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); 
    }); 
} 

这工作正常。我得到了我期待的结果 - 为了这个例子，我将简化输出。攀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中，看着有问题的标签，我希望它看起来像这样做的时候：

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

我尝试过和。每（）循环in_parseMatches（）后加入$（ui.panel）.append（），但由此产生的HTML只是把两者处于同一水平，造成这样的：

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

任何人有什么建议吗？使用jQuery 1.4.2和jQueryUI 1.8.3。希望我包括所有相关信息。如果没有，请随时询问...

谢谢！

Answer 1

我希望我理解正确，你只是想包装#match_xxx元素与另一个div？

查看jQuery的wrap()方法。

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

我已经使用了类，而不是一个ID，因为如果你要包多个项目，就必须重复的ID，这是无效的标记。