javascript - 如何在jQuery中的每组新数据之后放置一个br标签

当我单击任意一个按钮并单击添加按钮时，我有六个按钮和一个添加按钮，我得到它们的值，因此，如果我单击第一个按钮和第三个按钮并单击添加，我将获得第一个和第三个按钮的值。但是，当我再次尝试并说我单击第二个和第五个按钮，然后单击添加时，我到达那里值的按钮，它们连接到那里的最后一个值，然后我希望它给出两个br标签，然后显示这些值

这是我的代码

var valArray = [];
      $('button').click(function() {
        if (valArray.indexOf(this.value) === -1) {
          valArray.push(this.value);
          return false;
        }
      });

      $('.add').click(function() {
        $("#values").html(valArray + " ");

      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i>
linux
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i>
apple
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i>
windows
</button>




<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='chrome'><i class='fa fa-check'></i>
chrome
</button>



<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='netscape'><i class='fa fa-check'></i>
netscape
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='github'><i class='fa fa-check'></i>
github
</button>




<button type="button" id="addButton" class="add">Add</button>


<div id="values">


      </div>

最佳答案

添加到Value div后，应清空valArray。这意味着任何新值都将是单独的。

var valArray = [];
      $('button').click(function() {
        if (valArray.indexOf(this.value) === -1) {
          valArray.push(this.value);
          return false;
        }
      });

      $('.add').click(function() {
        var valueText = $("#values").html();
        console.log(valueText);
        $("#values").html(valueText + valArray + "<br><br>");
        valArray = [];
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i>
linux
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i>
apple
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i>
windows
</button>




<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='chrome'><i class='fa fa-check'></i>
chrome
</button>



<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='netscape'><i class='fa fa-check'></i>
netscape
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='github'><i class='fa fa-check'></i>
github
</button>




<button type="button" id="addButton" class="add">Add</button>


<div id="values">


      </div>