how do i reference an id with concatenated variable in jquery appendTo()?

Question

I am appending html code to a div using jquery. Part of that code references a div's id using a concatenated variable from a loop.

$(... +
    '<div class="recommendations filter" id="recCards-'+ i +'">' +
    '<div><h5>Recommended Cards</h5></div>' +
        '<ul></ul>' +
    '</div>' +
  ...
 ).appendTo('.someDiv');

I'm then trying to append code from another loop into the ul by referencing the ".recommendations" div's ID like so...

var recCardsList = $(div).attr('id', '.recCards-'"+i+"' ul');

$('<div>'+recCardName+'</div>').appendTo(recCardsList);

I've tried every combination of quotation marks that i can think of, but nothing grabs the div correctly to append the new content

You are putting css select as your id, `'.recCards-'"+i+"' ul'`. If you were trying to find the element it would be `$('#recCards-'+i+" ul")` — Patrick Evans, Jul 07 '17 at 23:36

cнŝdk · Accepted Answer · 2017-07-07T23:53:21.117

Actually your code doesn't append the new created content to the div, because it has some errors:

var recCardsList = $(div).attr('id', '.recCards-'"+i+"' ul');
$('<div>'+recCardName+'</div>').appendTo(recCardsList);

By writing .attr('id', '.recCards-'"+i+"' ul') you are not getting the list from the div but, you are trying to update its id.

Actually if we pass two arguments to .attr(), the first will be the targeted attribute and the second one is its new value.

So to get the div you should just use $('#recCards-'+i+' ul') in your loop it will gets the respective lists, so your code would look like:

var recCardsList = $('#recCards-'+i+' ul');
$('<div>'+recCardName+'</div>').appendTo(recCardsList);

Here using $("#someId") will get the element with the id="someId" from the page.

this is the solution. my misuse of .attr() is what made the div with the variable not show up. thanks! — Holly Michelle, Jul 10 '17 at 15:56

score 0 · Answer 2 · answered Jul 07 '17 at 23:31

0

Try this:

var recCardsList = $(div).attr('id', '.recCards-'+i+' ul');

answered Jul 07 '17 at 23:31

Jovani Martinez

79
6

2

ID's don't have leading dots or spaces – charlietfl Jul 07 '17 at 23:43

score 0 · Answer 3 · answered Jul 07 '17 at 23:40

Assuming that variable i is still within the scope of the function the solution stated above

'recCards-'+i+' ul'

Would definitely work, as stated in the comment check either with console.log() or alert() what variable i is there is a chance due to what was given i is null.

If they are within the same function you can also look at this post to combine the 2 loops with appendTo() and append()

jQuery append inside appended element

score 0 · Answer 4 · answered Jul 07 '17 at 23:42

0

You'll hardly get the list that way. Try this:

var recCardsList = $('#recCards-' + i + ' ul');

Also it's not valid to append <div> to <ul>. It'd rather be <li>:

$('<li>'+recCardName+'</li>').appendTo(recCardsList);

answered Jul 07 '17 at 23:42

Kosh

16,966
2
19
34

yeah, that was a typo on my end, as i was rushing to post this question, while at work. and i've tried that syntax, but it gives me errors – Holly Michelle Jul 10 '17 at 15:45
Could you please let me know which errors you've got? – Kosh Jul 10 '17 at 15:50
actually nevermind. your answer is correct too. The fix to my problem was not using attr() and instead using $(), which you stated. – Holly Michelle Jul 10 '17 at 16:47
OK, have a nice day! – Kosh Jul 10 '17 at 17:33

score 0 · Answer 5 · answered Jul 08 '17 at 00:29

0

Try this, use mask and replace by i,

var strReccards = ".recCards-MYINDEX ul";
var recCardsList = $(div).attr('id', recCardIndex.replace("MYINDEX",i));
$('<div>'+recCardName+'</div>').appendTo(recCardsList);

answered Jul 08 '17 at 00:29

JG73

90
1
10

how do i reference an id with concatenated variable in jquery appendTo()?

5 Answers5