为什么 JQuery 中的 .join() 不能正常工作？答案

【问题标题】：Why .join() in JQuery is not working properly?为什么 JQuery 中的 .join() 不能正常工作？
【发布时间】：2014-03-11 07:06:51
【问题描述】：

 <div id="feedback"></div>  

     <form id="myForm" action="controller.php" method="post">

         location1: <input type="checkbox" name="location1" id="location1" value="location1"/>
         location2: <input type="checkbox" name="location2" id="location2" value="location2"/><br>
         <input type="submit" id="submit" value="Submit" />
     </form>


         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
         <script type="text/javascript">

            $(document).ready(function(){


               $('#submit').click(function(e){

                  var locations = [];

                 $('input:checkbox:checked').each(function(){


                      locations.push($(this).val());

                 });

                 locations.join(" ! ");

                 $('#feedback').text(locations);

                 e.preventDefault();
               });

            });

         </script>

在上面的代码中，输出总是带有逗号（，）分隔符。还有为什么 $('#feedback').html(locations);没有在位置元素之间进行任何分离？

JSFiddle

【问题讨论】：

标签： jquery arrays checkbox

【解决方案1】：

你必须将join()的返回值赋给一个变量，它不会改变数组

var loc = locations.join(" ! ");
$('#feedback').text(loc);

【讨论】：

【解决方案2】：

join 操作（它是核心 JavaScript，而不是 jQuery）不会更新您调用它的变量，即

locations.join(" ! ");

正在加入您的数组，然后丢弃结果。您需要保存此操作的结果，或者直接将其传递到 .text 中，例如

$('#feedback').text(locations.join(" ! ");)

【讨论】：