Source : Wrap two adjacent elements in a containing div using jQuery
Cette astuce est utile si vous cherchez à réunir deux éléments frères dans un élément conteneur.
|
1 2 3 |
$(".form-container .form-label").each(function(index) { $(this).next(".form-field").andSelf().wrapAll("<div class='form-element-wrapper' />") }); |
Code source avant modification du DOM via jQuery :
|
1 2 3 4 5 6 7 8 9 |
<div class='form-container'> ... <div class='form-label'>Name (required)</div> <div class='form-field'><input type="text" name="you-name" value="" class="textbox" size="30" maxlength="200" /></div> <div class='form-label'>Email (required)</div> <div class='form-field'><input type="text" name="you-email" value="" class="textbox" size="30" maxlength="200" /></div> ... </div> |
Code source après modification du DOM via jQuery :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class='form-container'> ... <div class='form-element-wrapper'> <div class='form-label'>Name (required)</div> <div class='form-field'><input type="text" name="you-name" value="" class="textbox" size="30" maxlength="200" /></div> </div> <div class='form-element-wrapper'> <div class='form-label'>Email (required)</div> <div class='form-field'><input type="text" name="you-email" value="" class="textbox" size="30" maxlength="200" /></div> </div> ... </div> |