Question

我有10个具有相同名称类示例my-div的div。当在更改选择输入时触发事件时，我想将该div对的数量移除到输入的数量。

这是我正在尝试做的一个例子：

HTML

<select id="delete">
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

<div class="my-div"></div>
<div class="my-div"></div>
<div class="my-div"></div>
<div class="my-div"></div>
<div class="my-div"></div>
<div class="my-div"></div>

Jquery的

$(document).on('change','#delete',function(){

   var value = $(this).val();

   // here I need to remove the divs pair the variable value

});

Answer 1

如果我理解正确，你可以使用jQuery slice来获得你想要的数字：

$(document).on('change','#delete',function(){
    var value = parseInt($(this).val());
    if (value > 0) {
        $('.my-div').slice(0, value).remove();
    }
});

Example

Answer 2

试试：

$(document).on('change','#delete',function(){
   var value = +$(this).val();
   $('.my-div:lt(' + value + ')').remove();
});

http://jsfiddle.net/VE7uu/1/

Answer 3

你想删除，还是只想隐藏？如果您选择div然后返回1，那么直接删除4会给您的逻辑增加一点复杂性。

如果您想要的只是隐藏，那么您可以尝试这样的事情：

var divs = $('.my-divs');

// this way of tacking on events is kinda inefficient, btw
$(document).on('change', '#delete', function () {
    var idx = +($(this).val());
    divs.show()
        .filter(':gt(' + idx + ')')
        .hide()
        ;
});

使用Jquery删除给定数量的元素

3 个答案: