Question

我试图使用jQuery在<div>标记内包含几个元素。

我首先添加一个整体包装器，然后是一个标头元素，然后是一个span元素。我正在尝试将标题和跨度包装在容器div中，然后在这里阅读几篇文章并阅读文档，但是无法让它工作，目前它看起来像这样：

$(responseData).each(function(i) {
   var CountryN= this.CountryN;
   var Subtitles= this.subTitle;
   var $mainWrapper = $('<div/>').addClass('mainWrap');
   $mainWrapper.append($('<h4/>').text(CountryN));
   $mainWrapper.append($('<span/>').text(Subtitles).addClass('subT'));
})

结果如下：

<div class="mainWrap">
   <h4>USA</h4>
   <span class="subT">$12.1,563m, D.A.C = 01/01/2013</span>
</div>

我想要实现的是这种结构：

<div class="mainWrap">
   <div class="countryWrap">
      <h4>USA</h4>
      <span class="subT">$12.1,563m, D.A.C = 01/01/2013</span>
   </div>
</div>

我的页面有几个这些部分（每个部分都在自己的mainWrap中），尝试使用wrap all，但它需要包装标题和副标题，所以不知道我将如何选择它们（如果这是最好的方式去吧）

Answer 1

我猜你想在mainWrap中想要多个countryWraps，在这种情况下，你必须在每个循环之外创建mainWrap。

var $mainWrapper = $('<div/>').addClass('mainWrap');

$(responseData).each(function(i) {
   var CountryN= this.CountryN;
   var Subtitles= this.subTitle;
   var $countryWrapper = $('<div/>').addClass('countryWrap');
   $countryWrapper.append($('<h4/>').text(CountryN));
   $countryWrapper.append($('<span/>').text(Subtitles).addClass('subT'));
   $mainWrapper.append($countryWrapper);
})

Answer 2

jQuery有几个包装HTML的内容。我相信wrapInner（）会解决这个问题。

http://api.jquery.com/category/manipulation/dom-insertion-around/

http://jsfiddle.net/ynLmhk83/

jQuery(".mainWrap").wrapInner('<div class="countryWrap"></div>');

使用jQuery包装div标签内的元素

2 个答案: