Question

我的div中有多个标签。我想添加with，所以我可以将我现有的转换为bootstrap网格视图。这是我的html如下：

<div class="render-wrap" id="fb-render-wrap">
    <div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
        <label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
        <input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
    </div>
    <div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
        <label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
        <input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
    </div>   
</div>

我想要输出如下：

<div class="render-wrap" id="fb-render-wrap">
    <div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
        <div class="col-md-3">
            <label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
        </div>
        <div class="col-md-5">
            <input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
        </div>
    </div>
    <div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
        <div class="col-md-3">
            <label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
        </div>
        <div class="col-md-3">
            <input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
        </div>
    </div>
</div>

我曾尝试使用customdiv css迭代div，但不知道如何附加div。

$('.customdiv').children().each(function () {
  if ($(this).prop("tagName").toLowerCase() == "label") {
    $(this).prepend('<div class="col-md-3">');
    $(this).append("</div>");
  } else {
    $(this).prepend('<div class="col-md-5">');
    $(this).append("</div>");
  }
});

有人帮助我以最佳方式实现这一目标。

Answer 1

创建一个div并附加子项然后将新元素添加到父项中，以便您可以实现结果html

＆＃13;

$(document).ready(function() {
  $(".form-group").each(function(i, obj) {
    var tt = $('<div class="col-md-3"></div>');
    $(tt).append($(obj).find("label"));
    $(obj).append(tt);
    var tt = $('<div class="col-md-5"></div>');
    $(tt).append($(obj).find("input, select, textarea"));
    $(obj).append(tt);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="render-wrap" id="fb-render-wrap">
  <div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
    <label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
    <input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
  </div>
  <div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
    <label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
    <input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
  </div>
</div>

＆＃13;

Answer 2

看看：

$('.customdiv').children().each(function () {
  if ($(this).is('label')) {
      $(this).wrap('<div class="col-md-3"></div>');
  } else {
      $(this).wrap('<div class="col-md-5"></div>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="render-wrap" id="fb-render-wrap">
    <div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
        <label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
        <input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
    </div>
    <div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
        <label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
        <input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
    </div>   
</div>

将div标签添加到现有的渲染html中

2 个答案: