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致电。{/ p>

jsFiddle example

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(' ');
});

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

4 个答案:

Here's a fiddle