如何在 jquery appendTo() 中引用带有连接变量的 id？答案

【问题标题】：how do i reference an id with concatenated variable in jquery appendTo()?如何在 jquery appendTo() 中引用带有连接变量的 id？
【发布时间】：2017-07-08 08:29:51
【问题描述】：

我正在使用 jquery 将 html 代码附加到 div。该代码的一部分使用循环中的连接变量引用了 div 的 id。

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

然后我试图通过引用“.recommendations”div 的 ID 将另一个循环中的代码附加到 ul 中，就像这样......

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

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

我已经尝试了所有我能想到的引号组合，但没有一个能正确抓取 div 来附加新内容

【问题讨论】：

您将 css select 作为您的 id，'.recCards-'"+i+"' ul'。如果您试图找到元素，它将是 $('#recCards-'+i+" ul")

标签： javascript jquery html css concatenation

【解决方案1】：

实际上你的代码并没有将新创建的内容附加到div，因为它有一些错误：

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

通过编写.attr('id', '.recCards-'"+i+"' ul')，您不会从div 中获取列表，但您正在尝试更新其id。

实际上，如果我们将两个参数传递给 .attr()，第一个是目标属性，第二个是它的新值。

所以要获取 div，您应该在循环中使用 $('#recCards-'+i+' ul')，它将获取相应的列表，因此您的代码如下所示：

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

这里使用$("#someId") 将从页面中获取带有id="someId" 的元素。

【讨论】：

这就是解决方案。我对 .attr() 的滥用是导致带有变量的 div 不显示的原因。谢谢！

【解决方案2】：

试试这个：

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

【讨论】：

ID 没有前导点或空格

【解决方案3】：

假设变量 i 仍在上述解决方案的函数范围内

'recCards-'+i+' ul'

肯定会起作用，正如评论中所说，使用 console.log() 或 alert() 什么变量 i 有机会由于给定的 i 为空。

如果它们在同一个函数中，您还可以查看这篇文章，将 2 个循环与 appendTo() 和 append() 结合起来

jQuery append inside appended element

【讨论】：

【解决方案4】：

这样你很难得到列表。试试这个：

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

另外，将<div> 附加到<ul> 也是无效的。最好是<li>：

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

【讨论】：

是的，这是我的错字，因为我在工作时急于发布这个问题。我已经尝试过这种语法，但它给了我错误
能否告诉我您遇到了哪些错误？
其实没关系。你的回答也是正确的。解决我的问题的方法不是使用 attr()，而是使用您所说的 $()。
好的，祝你有美好的一天！

【解决方案5】：

试试这个，使用掩码并替换为 i，

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

【讨论】：