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

這是一個小提琴