将多个项目追加到分区

Appending Multiple Items To Div

本文关键字：分区 追加 项目      更新时间：2023-11-23

我有一个id为controls的HTMLdiv元素。

我正试图通过：添加一个带有2个input字段的div

this.controls = controlBtns
    .append('div')
    .classed({'time-container': true})
    .append('input')
    .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', 'disabled': 'disabled'});

结果是：

<div id="controls">
    <div class="time-container">
        <input type="number" min="0" max="24" steps="1" value="01:00">
    </div>
</div>

然而，我想最终得到2个input字段，所以：

<div id="controls">
    <div class="time-container">
        <input type="number" min="0" max="24" steps="1" value="01:00">
        <input type="number" min="0" max="60" steps="1" value="01:00">
    </div>
</div>

上述inputs表示小时（24）和分钟（60）。然而，当我尝试时：

this.controls = controlBtns
    .append('div')
    .classed({'time-container': true})
    .append('input')
    .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', 'disabled': 'disabled'})
    .append('input')
    .attr({type: 'number', min: '0', max: '60', step:'1', value:'00', 'disabled': 'disabled'});

结果是：

<div id="controls">
    <div class="time-container">
        <input type="number" min="0" max="24" steps="1" value="01:00">
    </div>
    <input type="number" min="0" max="60" steps="1" value="01:00">
</div>

我如何才能得到：

<div id="controls">
    <div class="time-container">
        <input type="number" min="0" max="24" steps="1" value="01:00">
        <input type="number" min="0" max="60" steps="1" value="01:00">
    </div>
</div>

尝试：

var timeContainer = controlBtns
  .append('div')
  .classed({'time-container': true});
timeContainer
  .append('input')
  .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', 'disabled': 'disabled'});
timeContainer
  .append('input')
  .attr({type: 'number', min: '0', max: '60', step:'1', value:'00', 'disabled': 'disabled'});
this.controls = timeContainer;

我会这样做：

$("#controls").append('<div class="time-container"></div>');
var timeContainer = $("#controls").find('.time-container');
timeContainer
    .append('<input />')
    .find('input')
    .last()
    .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', 'disabled': 'disabled'});
timeContainer
    .append('<input />')
    .find('input')
    .last()
    .attr({type: 'number', min: '0', max: '60', step:'1', value:'00', 'disabled': 'disabled'});

这应该很好用。

在jQuery中，您可以附加整个HTML片段。所以，你可以做这个

$('#controls").append('<div class="time-container"><input type="number" min="0" max="24" steps="1" value="01:00"><input type="number" min="0" max="60" steps="1" value="01:00"></div>');

好吧，如果输入是数字，我不确定我是否可以使用格式为"01:00"的值，只有"1"，对于附加部分，我更喜欢使用"appendTo"，这样我就可以设置将输入附加到哪里。我看到有第二个DIV的附加，我认为附加部分的其余部分应该在这个II分区内。

controlBtns = $('#controls');
$('<div>').attr({
'id': 'numbersWrapper'
}).appendTo( controlBtns );
$('<input>').attr({
'type':'number',
'min':'0',
'max':'24',
'steps':'1',
'value':'1',
'id': 'hrs'
}).appendTo('#numbersWrapper' );
$('<input>').attr({
'type':'number',
'min':'0',
'max':'60',
'steps':'1',
'value':'1',
'id': 'mins'
}).appendTo( '#numbersWrapper' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="controls"></div>

相关文章：