Question

每次我选中一个复选框时，该值都会被推送到数组中，并且我想将其附加到div上，但每个项目都应位于其自己的div中。

$(document).ready(function() {
    $('input[name="size"]').on('click', function() {
        var size = $(this).val();
        $('.selected-sizes').empty();

        var selectedSize = new Array();
        $('input[name="size"]:checked').each(function() {
            selectedSize(this.value);
            $('.selected-sizes').append('<div class="size-chosen"><span>' + selectedSize + '</span></div>');
        });
    });
});

但是我将这段代码添加到每个新行中。

small
small, large
small, large, medium

是否可以将数组中的每个项目放在自己的Line上，如：

small
large
medium

如果我将追加放在每个循环的外面，那么它将显示在同一行中用逗号分隔的每个项目，而不是在新行/自己的div中显示每个项目。

当前输出的html：

<div class="selected-sizes">
    <div class="size-chosen"><span>small, large, medium</span></div>
</div>

必需的输出：

<div class="selected-sizes">
    <div class="size-chosen"><span>small</span></div>
</div>
<div class="selected-sizes">
    <div class="size-chosen"><span>large</span></div>
</div>
<div class="selected-sizes">
    <div class="size-chosen"><span>medium</span></div>
</div>

Answer 1

我认为根据您的代码，当前输出应为

<div class="selected-sizes">
    <div class="size-chosen"><span>small</span></div>
    <div class="size-chosen"><span>small, large</span></div>
    <div class="size-chosen"><span>small, large, medium</span></div>
</div>

尝试

$(document).ready(function() {
$('input[name="size"]').on('click', function() {
    var size = $(this).val();
    $('.selected-sizes').empty();

    var selectedSize = new Array();
    $('input[name="size"]:checked').each(function() {
        selectedSize.push(this.value);
        $('.selected-sizes').append('<div class="size-chosen"><span>' + this.value + '</span></div>');
    });
});
});

另外，要推入数组，还应使用推方法（Reference）。

Answer 2

我会分别添加和删除每个循环，而不是每个循环

var $container = $('.selected-sizes'),
    $inputs = $('input[name="size"]');

$inputs.on('click', function() {
  var currentValue = this.value,
      currentIndex = $inputs.index(this); // need this for sorting
  
  if (this.checked) {
    $container.append('<div class="size-chosen" data-index="' + currentIndex + '"><span>' + currentValue + '</span></div>'); // append the clicked item to the container
    
    var sorted = $('.size-chosen').sort(function (a, b) {
        var contentA = parseInt($(a).data('index'), 10);
        var contentB = parseInt($(b).data('index'), 10);
        return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
     });            // this will sort the divs into the same order as your inputs - not sure if you want this, can be removed if you don't
     
    $container.html(sorted);  // update the container with the sorted divs
  } else {
    $container.find('.size-chosen').filter(function() {
      return $(this).text() === currentValue;              // filter the divs on the uncjecked value
    }).remove();    // remove the div if the checkbox is unchecked
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="size" value="small">
<input type="checkbox" name="size" value="medium">
<input type="checkbox" name="size" value="large">
<div class="selected-sizes"></div>

如何将数组的每个项目拆分为新的div

2 个答案: