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>

我尝试在.each（）循环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

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

查看jQuery的 wrap() 方法。

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

我使用的是一个类而不是一个ID，因为如果你打算包装多个项目，你就会有重复的ID，这是无效的标记。

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

1 个答案: