ブートストラップの行とcol Divを持つDivをラップする関数は、渡されたパラメータに影響しません

CodePen Linkで参照されるコードは、それぞれ（オフセットを使用して）3つの ".col-md-4"しかし、それは私が望んでいた通りではありません。ブートストラップの行とcol Divを持つDivをラップする関数は、渡されたパラメータに影響しません

私は間違いを理解することはできませんでしたが、パラメータの受け渡しと変数値の「緩い」が間違っていると思います。

var wrapWithBootstrap=function(toBeWrapped) 
 
    { 
 
    toBeWrapped.wrap('<div class="row"></div>'); 
 
     toBeWrapped.find('.first-div').wrap('<div class="col-md-offset-4 col-md-4"></div>'); 
 
     toBeWrapped.find('.second-div').wrap('<div class="col-md-offset-4 col-md-4"></div>'); 
 
    toBeWrapped.find('.third-div').wrap('<div class="col-md-offset-4 col-md-4"></div>'); 
 
    } 
 
$(document).ready(function() 
 
{ 
 
    var wrapperDiv=$('<div class="first-div"> This is my first div.</div>'); 
 
    wrapWithBootstrap(wrapperDiv); 
 
    $('#main').append(wrapperDiv); 
 
    
 
    var wrapperDiv=$('<div class="second-div"> This is my second div.</div>'); 
 
    wrapWithBootstrap(wrapperDiv); 
 
    $('#main').append(wrapperDiv); 
 
    
 
    var wrapperDiv=$('<div class="third-div"> This is my third div.</div>'); 
 
    wrapWithBootstrap(wrapperDiv); 
 
    $('#main').append(wrapperDiv); 
 
    
 
});

body 
 
{ 
 
    padding:32px; 
 
    background-color:#bbb; 
 
} 
 
.first-div 
 
{ 
 
    color:#336; 
 
    background-color:#9bb; 
 
    font-size:16px; 
 
    border: 1px solid #336; 
 
    padding:32px; 
 
    text-align:center; 
 
} 
 

 
.second-div 
 
{ 
 
    color:#363; 
 
    background-color:#9b9; 
 
    font-size:16px; 
 
    border: 1px solid #494; 
 
    padding:32px; 
 
    text-align:center; 
 
    
 
} 
 
.third-div 
 
{ 
 
    color:#633; 
 
    background-color:#b99; 
 
    font-size:16px; 
 
    border: 1px solid #633; 
 
    padding:32px; 
 
    text-align:center; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
<div id ="main" class="container-fluid"> 
 

 
</div> 
 
</body>

出典

2016-09-02 MedUnes

奇妙な方法でそれを解決する必要がありますが、私はそれを疑うことはありません。しかし、私は同じスコープ内で同じ変数を3回宣言していることを指摘します。

これはあなたが探しているものです。私はwrapコマンドを連鎖させ、その 'find'コマンドを取り出したことに注意してください。私もラップするためにそれらを呼び出す前に要素を追加しました：

var wrapWithBootstrap = function(toBeWrapped) { 
    toBeWrapped.wrap('<div class="row"></div>').wrap('<div class="col-md-offset-4 col-md-4"></div>'); 
} 

$(document).ready(function() { 
    var wrapperDiv=$('<div class="first-div"> This is my first div.</div>'); 
    $('#main').append(wrapperDiv); 
    wrapWithBootstrap(wrapperDiv); 

    var wrapperDiv=$('<div class="second-div"> This is my first div.</div>'); 
    $('#main').append(wrapperDiv); 
    wrapWithBootstrap(wrapperDiv); 

    var wrapperDiv=$('<div class="third-div"> This is my first div.</div>'); 
    $('#main').append(wrapperDiv); 
    wrapWithBootstrap(wrapperDiv); 
});

そしてcodepen：http://codepen.io/shigidaMark/pen/xExQRL

出典

2016-09-02 22:14:39

これはこれについてどこへ行くあなたhttp://codepen.io/dirtysmith/pen/ZpEmYW

function(toBeWrapped); 

$(document).ready(function() 
{ 
    var wrapperDiv=$('<div class="first-div col-md-4 col-md-offset-4"> This is my first div.</div>'); 
    wrapWithBootstrap(wrapperDiv); 
    $('#main').append(wrapperDiv); 

    var wrapperDiv=$('<div class="second-div col-md-4 col-md-offset-4"> This is my first div.</div>'); 
    wrapWithBootstrap(wrapperDiv); 
    $('#main').append(wrapperDiv); 

    var wrapperDiv=$('<div class="third-div col-md-4 col-md-offset-4"> This is my first div.</div>'); 
    wrapWithBootstrap(wrapperDiv); 
    $('#main').append(wrapperDiv); 

});

出典

2016-09-02 21:45:27

ちょうどそれを示すためにそれを解決して、しかし、私は、ブートストラップラッピングを内部で実行する必要が実際には、より複雑でコンディショニングされたラッピングを行います。 – MedUnes

ブートストラップの行とcol Divを持つDivをラップする関数は、渡されたパラメータに影響しません

答えて

関連する問題