在jQuery中克隆/附加大型HTML块，但更改内部变量

Clone/append large HTML blocks in jQuery but change inner vars?

本文关键字：变量 内部 HTML 大型 jQuery      更新时间：2023-09-26

我有一个大的HTML块，我需要根据选择框值进行克隆和附加。它按原样工作，但我想知道我是否可以使用克隆并动态更改某些内容，而不是使用实际的 HTML 块。

.HTML：

<select id="guestNum">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<div class="group-sizing">
    <div class='form-group row border'>
        <div class='inner'>
            <h3>Guest 1 Welcome</h3>
            <div class='select'>
                <select class='form-control' id='guest1'>
                    <option value='New' selected>New</option>
                    <option value='Existing'>Existing</option>
                </select>
            </div>
        </div>
        <div class='inner'>
            <h3>Date</h3>
            <div class='date'>
                <div class='inner'>
                    <p>April 1</p>
                    <p>No Guests</p>
                </div>
            </div>
        </div>
    </div>
</div>

.JS：

var comDate = $("<div class='inner'>'
                    <p>April 1</p>'
                    <p>No Guests</p>'
                </div>'
                <div class='inner'>'
                    <p>April 2</p>'
                    <p>Guests Welcome</p>'
                </div>");
$("#guestNum").change(function(){
    var count = $(this).val();
    $(".group-sizing .form-group:gt("+(count-1)+")").remove();
    for (var i = $(".group-sizing .form-group").length; i < count; i++){
        $("<div class='form-group row border'>'
        <div class='inner'>'
            <h3>Guest " + (i+1) + " Welcome</h3>'
            <div class='select'>'
                <select class='form-control' id='guest" + (i+1) + "'>'
                    <option value='New' selected>New</option>'
                    <option value='Existing'>Existing</option>'
                </select>'
            </div>'
        </div>'
        <div class='inner'>'
            <h3>Date</h3>'
            <div class='date'>" + comDate + "</div>'
        </div>'
    </div>").appendTo(".group-sizing");
    }
});

由于我已经在页面上包含代码块，我想知道我是否可以克隆我所拥有的，更改必要的值，然后以这种方式执行此操作，而不是再次将所有 HTML 都放在 js 中。

这是一个小提琴

我知道

这可能不是你想要的，但这里有一个如何克隆 html 并在其中插入变量的示例。

希望这将引导您朝着正确的方向前进。

这也可能是一页，为简单起见，我只是将其设置为不显示。

<div id="template" style="display:none;">
  <div class="group-sizing">
    <div class="form-group row border">
      <div class="inner">
        <h3>Guest {{id}} Welcome</h3>
        <div class="select">
          <select class="form-control" id="guest1">
            <option value="New" selected>New</option>
            <option value="Existing">Existing</option>
          </select>
        </div>
      </div>
      <div class="inner">
        <h3>Date</h3>
        <div class="date">
          <div class="inner">
            <p>{{date}}</p>
            <p>No Guests</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

然后创建一个 JS 函数来抓取 html 的{{}} 

function findHandleBars(html) {
  var results = [], re = /{{([^}]+)}}/g, text;
  while(text = re.exec(html)) {
    results.push(text[1]);
  }
  return results;
}

我创建了一个简单的"来宾"数组

var guests = [
   {
      "id": "1",
      "date": "April 1"
   },
   {
      "id": "2",
      "date": "April 2"
   },
   {
      "id": "3",
      "date": "April 3"
   }
];

定义

var template = $('#template').prop('innerHTML');

调用 findHandleBars 方法并将数组设置为变量

var results = findHandleBars(template);

然后循环遍历客人并遍历找到的把手栏并替换为变量

for(i=0; i< guests.length; i++){
var n = template;
for(i=0; i< guests.length; i++){
  var n = template;
  for(b=0; b<results.length; b++){
    var n = n.replace('{{'+results[b]+'}}', guests[i][results[b]]);
  }
  $('#body').append(n);
};

这是小提琴...https://jsfiddle.net/csv8x6xz/15/

你可以使用 jQuery 的 clone（） 函数。然后使用

newguest = $('.group-sizing').eq(0).clone(); newguest.find('span','.guest-welcome').html(i); <<<更改克隆元素中的特定元素。>

在 jsFiddle 中测试。

.HTML

<select id="guestNum">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="group-sizing">
    <div class='form-group row border'>
      <div class='inner'>
      <h3 class='guest-welcome'>Guest <span>1</span> Welcome</h3>
        <div class='select'>
          <select class='form-control' id='guest1'>
            <option value='New' selected>New</option>
            <option value='Existing'>Existing</option>
          </select>
        </div>
      </div>
      <div class='inner'>
        <h3>Date</h3>
        <div class='date'>
          <div class='inner'>
            <p>April 1</p>
            <p>No Guests</p>
          </div>
        </div>
      </div>
    </div>
</div>

.JS

$("#guestNum").change(function(){
  var count = $(this).val();
  var len = $('.group-sizing').length;
  var newguest;
  var remove = true;
  for(var i = count; i > 0; i--)
  {
    newguest = $('.group-sizing').eq(0).clone();
    newguest.find('span','.guest-welcome').html(i);
    $(this).after(newguest);
    if(remove)
    {
      $('.group-sizing').eq(0).nextAll().remove();
      remove = false;
    }
  }
});
相关文章：