Onglets jQuery: Ajout de DIV au panneau

Question

J'ai du mal à comprendre cela. J'ai la fonction AddTab suivante, qui prend un certain nombre d'arguments pour construire le nouvel onglet à ajouter:

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

Cela fonctionne très bien. J'obtiens ce que je m'attends à faire - dans l'intérêt de cet exemple, je vais simplifier la sortie. Tab 4 est ce qui est créé un nouveau ici:

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

Mon problème est que je dois envelopper le tout à l'intérieur d'un autre div, en regardant l'onglet en question, je veux qu'il ressemble à ceci lorsque vous avez terminé :

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

J'ai essayé d'ajouter $ (ui.panel) .append(), mais le résultat HTML met tout à la fois au même niveau, ce qui dans ce avant et après les .Chaque() in_parseMatches en boucle():

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

Toute personne avoir des suggestions? En utilisant jQuery 1.4.2 et jQueryUI 1.8.3. J'espère avoir inclus toutes les informations pertinentes. Si non, n'hésitez pas à demander ...

Merci!

Answer 1

J'espère que je comprends bien, vous voulez juste envelopper l'élément #match_xxx avec un autre div?

Consultez la méthode wrap() de jQuery.

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

J'ai utilisé une classe au lieu d'une carte d'identité, parce que si vous allez envelopper plusieurs articles, vous auriez double identité, ce qui est de balisage non valide.