Comment est-ce que j'emballe chaque ensemble de deux éléments avec jQuery?

Question

Je voudrais emballer chaque ensemble de <h2> et <table> dans leur propre <div> afin que je puisse manipuler le nouveau conteneur avec CSS.

Voici une version simplifiée du HTML, je travaille avec:

<div> 
<h3></h3> 
<h2 class="product-line-term-name">Product 1</h2> 
<table class="views-view-grid"></table> 
<h3></h3> 
<h2 class="product-line-term-name">Product 2</h2> 
<table class="views-view-grid"></table> 
<h3></h3> 
<h2 class="product-line-term-name">Product 3</h2> 
<table class="views-view-grid"></table> 
</div> 

Note: Je ne travaille sur la couche de thème si jQuery (version 1.3.2) et CSS sont mes outils.

Answer 1

Regardez ce code

jQuery.each($('.product-line-term-name'), function(i, val) { 
    //Create new element 
    var div = "<div>" + $(this)[0].outerHTML + $(this).next()[0].outerHTML + "</div>"; 

    $(this).prev().after(div); 
    $(this).next().remove(); 
    $(this).remove(); 
}); 

See fiddle

Answer 2

Vous pouvez utiliser nextUntil et wrapAll dans ce cas:

$('h3').each(function(){ 
    $(this).nextUntil('h3').wrapAll('<div class="example" />'); 
}); 

Démo: http://jsfiddle.net/9w9Sp/

Answer 3

Je pense que ce qui suit le code servira votre but pour jQuery 1.3.2:

var h3_length = $('h3').length; 

for(var i= h3_length - 1; i>= 0; i--) { 
    $('h3').eq(i).nextAll().not(".test, h3").wrapAll('<div class="test" />'); 
}