javascript - 无法从动态填充的字符串中 trim 尾随逗号

Question

我正在尝试从用复选框值动态填充的段落中 trim 最后一个字符。问题是我必须 trim 整个段落的尾随字符。我不想在将其添加到值列表之前从值中删除它。

这是一个代码笔:

http://codepen.io/cavanflynn/pen/PqLwKJ

HTML:

<dl class="dropdown"> 

<dt>
<a href="#">
  <span class="hida">▼</span>     
</a>
</dt>

<dd>
    <div class="mutliSelect">
        <ul class="ul">
            <li>
                <input type="checkbox" value="PONumber" />Number</li>
            <li>
                <input type="checkbox" value="AuthNumber" />Auth Number</li>
            <li>
                <input type="checkbox" value="StatusId" />Status</li>
            <li>
                <input type="checkbox" value="ManufacturerId" />Manufacturer</li>
        </ul>
    </div>
</dd>
</dl>
<p class="multiSel"></p> 

Javascript:

$(".dropdown dt a").on('click', function () {
      $(".dropdown dd ul").slideToggle('fast');
  });

  $(".dropdown dd ul li a").on('click', function () {
      $(".dropdown dd ul").hide();
  });

  function getSelectedValue(id) {
       return $("#" + id).find("dt a span.value").html();
  }

  $(document).bind('click', function (e) {
      var $clicked = $(e.target);
      if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
  });


  $('.mutliSelect input[type="checkbox"]').on('click', function () {

      var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
          title = $(this).val() + ",";

      if ($(this).is(':checked')) {
          var html = '<span title="' + title + '">' + title + '</span>';
          $('.multiSel').append(html);
      } 
      else {
          $('span[title="' + title + '"]').remove();
          var ret = $(".hida");
          $('.dropdown dt a').append(ret);

      }
  });

这里有很多关于 trim 尾随字符的问题，但我不知道如何在动态添加值后 trim 整个段落。谢谢!

Answer 1

下面的代码可以实现你想要的功能。我将逗号移到 <span> 之外

$('p.multiSel')
    .html($(this)
        .find('input[type="checkbox"]:checked')
        .map(function(idx, elem) {
            return $(elem).parent().text().trim();
        })
        .get()
        .map(function(text) {
            return "<span title='" + text + "'>" + text + "</span>";
        })
        .join(', '));

CodePen

说明

$('p.multiSel').html(...)

( .html ) 设置 <p class='multiSel'> 的内容.

$(this).find('input[type="checkbox"]:checked')

( .find ) 获取选中的复选框。

.map(...)

( .map ) 将选中的复选框数组映射到其纯文本，并 trim 掉空格。

.get()

( .get ) 将 jQuery 选择转换为常规数组。

.map(...)

( Array.prototype.map ) 通过将纯文本包装在 <span> 中，将纯文本映射到您想要创建的元素中标签和东西。

.join(...)

( Array.prototype.join ) 在我们正在处理的数组的所有元素之间插入逗号和空格。