How to wrap DIV tags with different class names? [duplicate]

独自空忆成欢 提交于 2019-11-30 16:06:13

问题


Duplicate:
How can I add a parent element to a group of paragraph?

I have the following HTML blocks repeated in the document

<!-- first block -->
<div class="first">
   My first div
</div>
<div class="second">
   My second div
</div>

<!-- second block -->
<div class="first">
   My first div
</div>
<div class="second">
   My second div
</div>

...

How can I wrap the Divs with jQuery to get the resulting HTML like this...

<!-- first block -->
<div class="container">
   <div class="first">
      My first div
   </div>    
   <div class="second">
      My second div
   </div>
</div>

<!-- second block -->
<div class="container">
   <div class="first">
      My first div
   </div>    
   <div class="second">
      My second div
   </div>
</div>

...

回答1:


You're in luck, that's exactly what wrapAll is for:

$(".first, .second").wrapAll('<div class="container"></div>');

Live Example | Source


Your edit markedly changes the question. If you need to do the above only within some containing block, you can loop through the containing blocks and apply wrapAll only to their contents. You'll need a way to identify the way you want to group your divs, which you haven't specified in the question.

If the divs have some kind of container around them, you can do this:

$(".block").each(function() {
  $(this).find(".first, .second").wrapAll('<div class="container"></div>');
});

In that example, I've assumed the divs are within a container with the class "block".

Live Example | Source

If there's no structural way to identify them, you'll have to do it some other way. For instance, here we do it by assuming any time we see a first, we should stop grouping:

var current = $();

$(".first, .second").each(function() {
  var $this = $(this);
  if ($this.hasClass('first')) {
    doTheWrap(current);
    current = $();
  }
  current = current.add(this);
});
doTheWrap(current);

function doTheWrap(d) {
  d.wrapAll('<div class="container"></div>');
}

Live Example | Source

That works because $() gives you the elements in document order, so if we loop through them in order, saving them up, and then wrap up the previous ones whenever we see a new first (and of course, clean up at the end), you get the desired result.

Or here's another way to do that same thing, which doesn't use wrapAll. It relies on the first matched element being a first (so no seconds before firsts!):

var current;

$(".first, .second").each(function() {
  var $this = $(this);
  if ($this.hasClass('first')) {
    current = $('<div class="container"></div>').insertBefore(this);
  }
  current.append(this);
});

Live Example | Source




回答2:


$('div').wrapAll('<div class="container" />');

would do it, but that would also wrap any other divs so perhaps:

$('.first, .second').wrapAll('<div class="container" />'); 

is better.



来源:https://stackoverflow.com/questions/13877743/how-to-wrap-div-tags-with-different-class-names

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!