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，這是無效的標記。