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

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(" "));