包裹一個DIV與自舉ROW和COL的div不影響傳遞的參數的函數

由CodePen Link所指的代碼應該導致三」 .COL-MD-4" 的div每一個爲中心的（以偏移）在然而，單獨的一排，並不像我想要的那樣。包裹一個DIV與自舉ROW和COL的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

奇怪的方式去了解這一點，但我不會質疑它。然而，我會指出，你在同一個範圍內聲明瞭同一個變量三次。

這裏應該是你在找什麼。注意我已經鏈接了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

包裹一個DIV與自舉ROW和COL的div不影響傳遞的參數的函數

回答

相關問題