在使用addClass和jQuery变量时添加空格

Question

我让jQuery阅读了一些文本，然后根据此文本的值添加了一个类。 （读取的文本由我的CMS呈现）。

HTML看起来像这样：

<ul class="zoneSubscriptions">
 <li>
   <ul>
      <li class="zoneName"><a href="#">Professional</a></li>
      <li>Never</li>
   </ul>
 </li>
 <li>
   <ul>
     <li class="zoneName"><a href="#">RTTM</a></li>
     <li>Never</li>
   </ul>
 </li>
</ul>

我想阅读class="zoneName"的文本并基于此添加一个类。

JS做到这一点：

$(function() {
   var zone = $( ".zoneName" ).text();
   $( "#zones" ).addClass( zone );
});

这没有问题，但是，我需要添加两个类Professional和RTTM 。 它添加的是ProfessionalRTTM 。

我的问题是如何在单词之间保持空格的同时添加类？

换句话说，它应该这样呈现： class="Professional RTTM" 而不是 class="ProfessionalRTTM"

注意：在我的示例中，有两个“ zoneName”。 实时使用时，可能会有1到5或更多的任何地方。

Answer 1

尝试迭代标签：

var $zones = $("#zones");

$(".zoneName").each(function () {
  $zones.addClass( $(this).text() );
});

也可以（如果您想重用类名列表）

var classes = [];
$(".zoneName").each(function () {
  classes.push($(this).text());
});

$("#zones").addClass(classes.join(" "));

Answer 2

您正在对多个结果调用.text() ，这些结果将它们连接在一起。

为什么不这样做呢？

var zone = $( ".zoneName" ).each(function(){
    $("#zones").addClass($(this).text());
});

找到所有.zoneName ，然后为每个调用addClass 。

jsFiddle示例

Answer 3

您需要遍历.zoneName ，否则您的.text()将是一个不可分割的字符串（除非那里有空格）

$(".zoneName").each(function() { 
    $("#zones").addClass($(this).text());
});

Answer 4

您可以使用addClass()的回调函数，并使用map()获取文本数组，然后只需添加一个空格即可：

$('#zones').addClass(function() {
    return $('.zoneName').map(function() {
        return $(this).text();
    }).get().join(' ');
});

这是一个小提琴