.append not working with spaces

Question

I am trying to add and remove <li>'s to a <ul> using the data from within the class add-to-favourites, the problem is that when I have more than one word or a space between words the jQuery no longer recognises that it is the same word and adds the same value to the <ul> again.

You can see the problem here: http://jsfiddle.net/ZWxBb/

Try clicking on the rows of text you will see they are added and removed to the <ul> except for the first instance of class which is just added everytime it is clicked.

It would also be great if you could use more than 2 words as the element text, plus add a div which when clicked removed the item from favourites

HTML:

<div class="add-to-favourites">Two Words</div>
<div class="add-to-favourites">OneWords</div>
<div class="add-to-favourites">NoSpaces</div>
<ul id="favourites"></ul>

jQuery:

$(function () {
$('.add-to-favourites').click(function() {
   var num = $(this).text();
   var $fav = $('#favourites');
   var $fav_li = $fav.find('.' + num + '_li');

   if ($fav_li.length) {
      $fav_li.remove();
   } else {
      $('#favourites').append('<li class="' + num + '_li">' + num + '</li>');
   }
})
});

Thanks, Ben

class names can't have spaces, you will have to convert the spaces into or something else to identify them — orhanhenrik, Aug 22 '12 at 15:25
See [this answer](http://stackoverflow.com/a/449000/106866) for valid CSS class names — jao, Aug 22 '12 at 15:27
Can you please move your code to the question? The question loses lots of value if JSFiddle is down. — Andrew Whitaker, Aug 22 '12 at 15:29

score 2 · Answer 1 · answered Aug 22 '12 at 15:26

You can use the class attribute of an HTML element to define multiple classes by separating them with a space. When your element text contains one or more spaces, two things happen:

This line will never select any elements, because you end up with the wrong selector.

var $fav_li = $fav.find('.' + num + '_li');

And this line:

$('#favourites').append('<li class="' + num + '_li">' + num + '</li>');

will append an element with at least two classes on it.

My suggestion is to replace spaces with dashes after storing the text in num, and use that for selecting by or assigning your single class:

var num = $(this).text().replace(' ', '-');

Updated DEMO

Thank you, but is there a way for it to work when the element text contains more than 2 words. If you look at your demo and try to use 3 words the original problem is back. — Ben Jackson, Aug 22 '12 at 16:09

Will · Answer 2 · 2012-08-22T22:23:24.680

1

Class names cannot contain spaces because in CSS selectors, spaces are used to separate each selector. So when you click on the Two Words div, you end up trying to select .Two Words_li, which is elements with the class name Two and child elements with the tag name Words_li.

One way to deal with this would be to convert all the spaces to a different character.

var num = $(this).text().replace( /\s+/g, "-" );

edited Aug 22 '12 at 22:23

answered Aug 22 '12 at 15:26

Will

19,661
7
47
48

Thank you, it looks like this doesn't work for more than 2 words though? for example, with 3 words the original problem is back. – Ben Jackson Aug 22 '12 at 16:10
Just add a `g` to the regexp: `/\s+/g`. – Will Aug 22 '12 at 22:12

Matt · Accepted Answer · 2012-08-22T16:26:34.123

1

As lzzey said, class names cannot contain spaces. Try doing a .replace(" ", "_" ) on your class matching:

$('.add-to-favourites').click(function() {
   var num = $(this).text();
   var numClass = num.replace(" ", "_" );
   var $fav = $('#favourites');
   var $fav_li = $fav.find('.' + numClass  + '_li');

   if ($fav_li.length) {
      $fav_li.remove();
   } else {
      $('#favourites').append('<li class="' + numClass  + '_li">' + num + '</li>');
   }
})

http://jsfiddle.net/ZWxBb/2/

UPDATE:

I would suggest using something other that the text to identify the li's

Html:

<div class="add-to-favourites" data-item="1">Two Words</div>
<div class="add-to-favourites" data-item="2">One asd asd asd asd Words</div>
<div class="add-to-favourites" data-item="3">NoSpaces</div>

Then js:

$('.add-to-favourites').click(function() {
   var num = $(this).data( "item" );
   var text = $(this).text();
   var $fav = $('#favourites');
   var $fav_li = $fav.find('.' + num + '_li');

   if ($fav_li.length) {
      $fav_li.remove();
   } else {
      $('#favourites').append('<li class="' + num + '_li">' + text + '</li>');
   }
})

http://jsfiddle.net/ZWxBb/3/

edited Aug 22 '12 at 16:26

answered Aug 22 '12 at 15:28

Matt

156
7

Thank you, but is it possible for it to work no matter how many words, for example the original problem persists if you use two or more words – Ben Jackson Aug 22 '12 at 16:11
1

I would use something other than the text() to indetify the li's: http://jsfiddle.net/ZWxBb/3/ – Matt Aug 22 '12 at 16:25
Thanks for your help Matt, this is excellent. How would I add a new class to the added `
` element which when clicked removed it from the list?

Ben Jackson

Aug 22 '12 at 19:21

1

No problem! You mean, clicking on a li in favourites removes it as well? Easy: http://jsfiddle.net/vUyDk/ Please note the .live function to bind the click, it works a bit differently than .click (http://api.jquery.com/live/) – Matt Aug 23 '12 at 12:56

thank you, but rather than clicking on the li itself which was added to favourites I would rather click on a new span in the li which was added to favourites which contained the word 'remove'. Is this possible? when I opened your jsfiddle I couldn't get that functionality to work – Ben Jackson Aug 23 '12 at 23:08

score 0 · Answer 4 · answered Aug 22 '12 at 15:26

0

That is because you add the 'num' var as a CSS class name. CSS class names cannot have spaces. You should replace spaces and specials characters with an empty string before using them as a CSS class name.

answered Aug 22 '12 at 15:26

jao

18,273
15
63
96

.append not working with spaces

4 Answers4