根据字段中的值减去属性的大小，在div之后插入div

Question

我有一组包含product-quantity类的数字字段。当我向输入字段添加一个数字时，div class name- number -field应该出现在class name-number-header之后。当从字段中删除一个数字时，应删除姓氏-数字字段。

当应该添加val= 8和size= 0 8 div时，应该添加val= 8和size= 3 5 div

这就是我想出来的，但我被卡住了

$(document).ready(function() {
$('.product-quantity').on('change',function(){
    selector = "#product-"+$(this).attr('data-product-id')+
    "[data-size-field='"+$(this).attr('data-size') +"']";
if ($(this).val > $(selector).size) {
    for (var i = 0; i < (val-size); i++){
        $('.size-field').insertAfter($(".name-number-header"));
    }
}
if ($(this).val < $(selector).size) {
    for (var i = 0; i < (size-val); i++){
        $('.size-field :last').remove();
    }
}
});
});

http://s24.postimg.org/x4njd7r44/Screen_Shot_2013_12_12_at_6_03_47_PM.jpg

以下是html检查的屏幕截图的链接。

html：

 <div class="size-column">

 <div class="size-field">
    <div id="size-label"></div>
    <div class="number-input">
        <input id="XSmall" class="product-quantity" type="number" name="XSmall" min="0" 
 max="9999" data-size="XSmall" data-product-id="1"></input>
    </div>
</div>
<div class="size-field">
    <div id="size-label"></div>
    <div class="number-input">
        <input id="Small" class="product-quantity" type="number" name="Small" min="0" 
 max="9999" data-size="Small" data-product-id="1"></input>
    </div>
</div>
<div class="size-field">
    <div id="size-label"></div>
    <div class="number-input">
        <input id="Medium" class="product-quantity" type="number" name="Medium" min="0" 
 max="9999" data-size="Medium" data-product-id="1"></input>
    </div>
</div>

....up至5xl

<div class="name-number-form" data-switch="1" style="display: none;">

<div class="name-number-header"></div>
<div id="number-field-set">
    <div class="name-number-field" data-size="XSmall">
    </div>
    <div class="name-number-field" data-size="Small">
    </div>
    <div class="name-number-field" data-size="Medium">
    </div>

...up至5xl

编辑代码：

$(document).ready(function() {
$('.product-quantity').on('change',function(){
selector = "#product-"+$(this).attr('data-product-id')+
" [data-size-field='"+$(this).attr('data-size') +"']";
var val = $(this).val();
var size =  $(selector).size();
if (val > size) {
for (var i = 0; i < (val-size); i++){
    $('hi').insertAfter($(".name-number-header"));
}
}
if (val < size) {
for (var i = 0; i < (size-val); i++){
    $('.name-number-field :last').remove();
}
}
});

})；

我创建了一个小提琴，模拟了我想要做的事情。我不想要的是第二个输入来影响第一列中div的添加和删除。

http://jsfiddle.net/7PhJZ/19/

Answer 1

$('.size-field').insertAfter($(".name-number-header"));

搜索具有size-field类的元素。

如果我正确理解了您的问题，您希望创建新的size-field div并附加它们。如果是这样的话，像这样试一下：

$('<div/>',{'class':'size-field'}).insertAfter($(".name-number-header"));

这将创建一个带有类size-field的新div，并将其添加到.name-number-header之后。