我有一个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>