jQuery append using for loop

Question

I was not really sure how to title this, but I hope that the question itself will make the most sense.

var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

for(var i=0; i<str.length; i++){
  $("div[id^= " + str.charAt(i) + "]").wrapAll("<div id='" + str.charAt(i) + "' 
       class='alpha-content'></div>");
  //$("'#" + str.charAt(i) + "'").append('<span class="letter-header">' + 
    //   str.charAt(i) + '</span>');
  $('#A').append('<span class="letter-header">' + str.charAt(i) + '</span>');
};

So I am trying to append the span element to my generated html in a for loop, but for some reason i keep getting errors. With out the added span class, my html looks something like this:

<div id="A" class="alpha-content">
  <div id="someName" class="inner-content">
    <a href="someName">someName</a>
  </div>
</div>

What i am trying to do is add a <span class="header-letter"> inside the letter with the corresponding div id tag. For some reason I can grab the letter just fine when I have it hard coded like $('#A').append blah blah blah... But if I try doing it with the $("'#" + str.charAt(i) + "'").append i get an error saying this:

Uncaught Error: Syntax error, unrecognized expression: '#A'

I can't figure out where I went wrong... Any ideas?

cookie monster · Accepted Answer · 2014-01-12 16:48:23Z

2

Get rid of the single quotes in the selector.

$("#" + str.charAt(i)).append

This will be equivalent a selector that looks like this:

"#A"

instead of this:

"'#A'"

The outermost quotes are just part of the string literal syntax, that I'm using for display purposes. The actual content of the selector string will be #A, while you had '#A'. The ' doesn't have any valid meaning in that placement in the actual content of a selector string.

answered Jan 12, 2014 at 16:48

cookie monster

11k4 gold badges33 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

jQuery append using for loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related