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

我让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>

这没有问题，但是，我需要它来添加两个类，

Professional

和

RTTM

。它增加了

ProfessionalRTTM

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

换句话说，它应该如下呈现：

class=“Professional RTTM”

而不是

class=“Professional RTTM”

---

注意：在我的示例中有两个“zoneName”。现场使用时，可能有1到5个或更多

尝试迭代标记：

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

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

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

---

尝试迭代标记：

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

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

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

---

您需要遍历

.zoneName

s，否则您的

.text（）

将是一个不可分割的字符串（除非其中有空格）

---

您需要遍历

.zoneName

s，否则您的

.text（）

将是一个不可分割的字符串（除非其中有空格）

您正在对多个结果调用

.text（）

，这些结果将它们连接在一起

为什么不这样做呢

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

找到所有的

.zoneName

s，然后为每一个调用

addClass

您正在调用将多个结果连接在一起的

.text（）

为什么不这样做呢

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

找到所有的

.zoneName

s，然后为每一个调用

addClass

---

您可以使用

addClass（）

的回调函数，并使用

map（）

获取文本数组，然后简单地用空格连接：

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

---

您可以使用

addClass（）

的回调函数，并使用

map（）

获取文本数组，然后简单地用空格连接：

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