复制具有相同类的元素并将其置于自身之下？

时间：2018-06-28 19:30:33

标签： javascript jquery twitter-bootstrap

已更新：我包含此Codepen，因为我在代码段方面遇到了问题 https://codepen.io/ddcreate/pen/RJqOxo

我使用bootstrap 4进行​​了这种布局

current layout

我要实现的是单击“添加新项”时，将在下面插入一个新的空行。由于网站需要响应，因此不可能将所有标签都放在一行中，而将字段放在另一行中，否则页面会在较小的屏幕上混乱。

我找到了一些有关如何使用jQuery进行克隆和插入的帖子，我尝试了它们，但问题仍然存在。

我用硬代码编写了一些脚本，不够优雅，而且它们没有完全按照我想要的做。布局混乱了。

messed up layout

代码如下：

//add empty item fields
let addRow = $('.add-item');
//when click add fields
addRow.on('click', function() {
  let newRow = $('.need-to-dup').clone(),
    target = $('.need-to-dup').parent();
  target[0].append(newRow[0]);
  target[1].append(newRow[1]);
  target[2].append(newRow[2]);
  target[3].append(newRow[3]);
  //console.log(newRow, newRow[3])
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="item-form">
  <div class="row">
    <div class="col-lg-2 col-md-6">
      <label for="quanty">Quanty</label>
      <input class="need-to-dup" type="text" name="quanty" value="">
    </div>
    <div class="col-lg-4 col-md-6">
      <label for="item">Item</label>
      <input class="need-to-dup" type="text" name="item" value="">
    </div>

    <div class="col-lg-4 col-md-6">
      <label for="comment">Comment</label>
      <input class="need-to-dup" type="text" name="comment">
    </div>
    <div class="col-lg-2 col-md-6">
      <label for="remove">Remove</label>
      <button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove">
                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                </button>
    </div>
  </div>
  <div class="add-item">
    <p>Add Another Item</p>
  </div>
</section>

4 个答案:

答案 0 :(得分：0)

很难说出你想做什么。您的“混乱”显示对我来说很好，这也是我如何看待我的外观。但是，如果您尝试复制整行（标签和全部）：

addRow.on('click', function() {
  let newRow = $('.row')[0].clone();
  newRow.appendTo($('.item-form')[0]);
});

答案 1 :(得分：0)

而不是重复每个项目，而是一次复制整个行。

//add empty item fields
let addRow = $('.add-item');
//when click add fields
addRow.on('click', function() {
  let lastRow = $('.row').last()
  lastRow.after(lastRow.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="item-form">
  <div class="row">
    <div class="col-lg-2 col-md-6">
      <label for="quanty">Quanty</label>
      <input class="need-to-dup" type="text" name="quanty" value="">
    </div>
    <div class="col-lg-4 col-md-6">
      <label for="item">Item</label>
      <input class="need-to-dup" type="text" name="item" value="">
    </div>

    <div class="col-lg-4 col-md-6">
      <label for="comment">Comment</label>
      <input class="need-to-dup" type="text" name="comment">
    </div>
    <div class="col-lg-2 col-md-6">
      <label for="remove">Remove</label>
      <button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove">
        <i class="fa fa-trash-o" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="add-item">
    <p>Add Another Item</p>
  </div>
</section>

答案 2 :(得分：0)

这是我的解决方法：

  • 使用.clone()克隆.row元素
  • 使用.find()查找所有标签并将其从克隆中删除
  • .append()克隆到.item-form元素中。

//add empty item fields
let addRow = $('.add-item');
//when click add fields
let original = $('.row');

addRow.on('click', function() {
  let clone = $(original).clone();
  $(clone).find('label').remove();
  $('.item-form').append(clone);
})
body {
  font-family: 'Quicksand', sans-serif;
}

nav {
  background: #66a6ff;
  background-image: linear-gradient(120deg, #66a6ff 0%, #89f7fe 100%);
  line-height: 70px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05)
}

button, .add-item {
  transition: all .2s ease-in-out;
}
/* ***
        Customer & Delivery Info Styling
*** */

input, .select-driver {
  width: 100%;
  margin-bottom: .5rem;
  height: 40px;
}

.form-control {
  border-color: #a9a9a9;
}

fieldset {
  background-color: white;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 5px 20px 18px;
  margin: 20px auto;
  box-shadow: 0 6px 15px rgba(36,37,38,0.08);
}

legend {
  font-size: 18px;
  width: auto;
  padding: 0 15px;
  text-align: center;
}

#recurring-checkbox {
  position: relative;
  top: -8px;
}

input[type=checkbox] {
    display: inline-block;
    margin-bottom: 0;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-appearance: none;
    outline: 0;
    border: none;
}

input[type=checkbox]:checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="#FD6585" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
}

input[type=checkbox]:not(:checked) {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" fill="#f68ba2" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
}

/* ***
        Items Detail Styling
*** */

.add-item {
  border: 3px dashed;
  font-size: 16px;
  color: #C3C3C3;
  text-align: center;
  margin: 20px 0;
}

.add-item p {
  margin: 0 auto;
  line-height: 40px;
}

.add-item:hover {
  color: #989898;
  background-color: rgba(215, 214, 214, 0.56);
  cursor: pointer;
}


/* ***
        Notes and Buttons Styling
*** */

textarea {
  height: auto;
  width: 100%;
  margin-bottom: 0;
}

.save-button {
  border: 1px solid;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  box-shadow: 0 6px 15px rgba(36,37,38,0.08);
  margin: 20px auto;
}

.save-button:hover {
  background-color: #66a6ff;
  border-color: #66a6ff;
}

.remove-item-button {
  color: #f68ba2;
  border: 1px solid #a9a9a9;
  border-radius: 5px;
  height: 40px;
}

.remove-item-button:hover {
  color: #eee;
  background-color: #f68ba2;
  border-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"/>
<section class="item-form">
  <div class="row">
    <div class="col-lg-2 col-md-6">
      <label for="quanty">Quanty</label>
      <input class="need-to-dup" type="text" name="quanty" value="">
    </div>
    <div class="col-lg-4 col-md-6">
      <label for="item">Item</label>
      <input class="need-to-dup" type="text" name="item" value="">
    </div>

    <div class="col-lg-4 col-md-6">
      <label for="comment">Comment</label>
      <input class="need-to-dup" type="text" name="comment">
    </div>
    <div class="col-lg-2 col-md-6">
      <label for="remove">Remove</label>
      <button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove">
              <i class="fa fa-trash-o" aria-hidden="true"></i>
            </button>
    </div>
  </div>
</section>

<div class="add-item">
  <p>Add Another Item</p>
</div>

答案 3 :(得分：0)

我认为最适合您的解决方案是：

  1. 克隆 div.row
  2. 使用索引更改 name 属性（可能会出现问题）
  3. 从克隆元素中删除标签

我做了一个简单的例子：

$(document).ready(function(){

	$(".add-item").on("click", function() {
  	var rows = $(".row","section.item-form"),
    		first = rows.first(), last = rows.last(), clone = first.clone();
        console.log(first);
    clone.insertAfter(last).find("[name!=''][name]").each(function() {
    	var name = $(this).attr("name").split("-")[0];
    	$(this).siblings("label").remove();
    	$(this).attr("name", name + "-" + rows.length);
    });
    
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="item-form">
         <div class="row">
          <div class="col-lg-2 col-md-6">
            <label for="quanty-0">Quanty</label>
            <input class="need-to-dup" type="text" name="quanty-0" value="" >
          </div>
          <div class="col-lg-4 col-md-6">
            <label for="item-0">Item</label>
            <input class="need-to-dup" type="text" name="item-0" value="" >
          </div>

          <div class="col-lg-4 col-md-6">
            <label for="comment-0">Comment</label>
            <input class="need-to-dup" type="text" name="comment-0">
          </div>
          <div class="col-lg-2 col-md-6">
            <label for="remove-0">Remove</label>
            <button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove-0">
              <i class="fa fa-trash-o" aria-hidden="true"></i>
            </button>
          </div>
      </div>
      <div class="add-item">
        <p>Add Another Item</p>
      </div>
    </section>

或者您可以在此fiddle

中观看 
**.find("[name!=''][name]")** : attr *name* must exist and has to have some value
.siblings : jquery description [here][2]
.clone : jquery description [here][2]

希望这会有所帮助。

相关问题
最新问题