Adding a Space when using addClass and variables using jQuery

Question

I have jQuery read some text then add a class based on the value of this text. (The text read is rendered by my CMS).

The HTML Looks like this:

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

I want to read the text of class="zoneName"and add a class based on this.

JS to do this:

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

This works without issue, however, I need it to add two classes, Professional and RTTM. What it adds is ProfessionalRTTM.

My question is how would I add the classes while keeping a space between the words?

In other words it should render like this: class="Professional RTTM" not class="ProfessionalRTTM"

Note: In my example there are two "zoneName"s. There could be anywhere from 1 to 5 or more when used live.

ComFreek · Accepted Answer · 2013-10-28 21:33:18Z

3

Try iterating the tags:

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

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

Also possible (if you want to reuse the list of class names)

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

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

answered Oct 28, 2013 at 21:33

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brandon · Accepted Answer · 2013-10-28 21:33:27Z

2

You're calling .text() on multiple results which is joining them together.

Why not do something like this instead:

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

Find all your .zoneNames and then call addClass for each one.

jsFiddle example

answered Oct 28, 2013 at 21:33

Brandon

70.3k32 gold badges201 silver badges227 bronze badges

Comments

lxe · Accepted Answer · 2013-10-28 21:33:21Z

1

You need to iterate across the .zoneNames, otherwise your .text() will be a one undivided string (unless you have whitespace in there)

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

answered Oct 28, 2013 at 21:33

lxe

7,7772 gold badges24 silver badges33 bronze badges

Comments

billyonecan · Accepted Answer · 2013-10-28 21:38:02Z

0

You can use the callback function of addClass(), and use map() to get an array of the text, then simply join with a space:

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

Here's a fiddle

answered Oct 28, 2013 at 21:38

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

Collectives™ on Stack Overflow

Adding a Space when using addClass and variables using jQuery

4 Answers 4

Comments

Comments

Comments

Here's a fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related