HOME > > > > >

.wrapAll()

.wrapAll( wrappingElement )

wrappingElement
Selector|htmlString|Element|jQuery

戻り値

object
jQuery

対象の要素をグループとして扱いwrappingElementで囲む。

サンプル

実行結果

wrapAll() wrap()
test1 test2 test3

Javascript

  1. var code1_span = $('#code1 span');
  2.  
  3. $('#code1-wrapAll').on('click', function(e){
  4.     code1_span.wrapAll('<div class="wrap-all" />');
  5. });
  6.  
  7. $('#code1-wrap').on('click', function(e){
  8.     if (code1_span.parent().is('p')) {
  9.         code1_span.unwrap();
  10.     } else {
  11.         code1_span.wrap('<p />');
  12.     }
  13. });

HTML

  1. <span class="cq-btn" id="code1-wrapAll">wrapAll()</span>
  2. <span class="cq-btn cq-btn-danger" id="code1-wrap">wrap()</span>
  3.  
  4. <div id="code1">
  5.     <span>test1</span>
  6.     <span>test2</span>
  7.     <span>test3</span>
  8. </div>

CSS

  1. #code1 .wrap-all {
  2.     display: inline-block;
  3.     padding: 4px;
  4.     background: #EEEFFF;
  5.     color:#000000;
  6.     border: 2px solid #DDDDDD;
  7. }
  8.  
  9. #code1 p {
  10.     padding: 4px;
  11.     background: #456f9a;
  12.     color:#FFFFFF;
  13.     margin: 2px;
  14. }