用Bootstrap row和col Div包装Div的函数不会影响传递的参数

A function to wrap a Div with Bootstrap row and col Divs does not affect the passed parameter

本文关键字：Div 影响 参数 函数 col Bootstrap 包装 row      更新时间：2023-09-26

CodePen链接引用的代码应该是3 "。color -md-4"将每一个元素在单独的行中居中(带有偏移量)，然而，这不是我想要的。

我认为我做错了参数传递和"丢失"变量值，虽然不能找出错误。

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>

这样做很奇怪，但我不会质疑它。但是，我要指出的是，您在同一作用域中声明了三次相同的变量。

这里应该是你要找的。注意，我已经链接了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);
});

和依存关系:http://codepen.io/shigidaMark/pen/xExQRL

这应该能帮你解决问题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);
});
相关文章：