Question

我想问一下是否有人看到发生了什么。我在创建它们时有很多jQuery追加元素的经验，我做了几次，但是现在我在2小时内挣扎而没有找到我的错误，也许你可以帮助我。

我正在尝试附加以下内容：

var contactoHolder = $('<div />', {'class':"contactoUnexpanded",'id':indexed});
contactoHolder.append(infoArray[0]);
$('<div />', {'class':"editDelete", 'id':indexed+'editDelete'}).appendTo(contactoHolder);     
$('<span />', {'class':"edit",'id':indexed+'_edit'}).appendTo('#'+indexed+'editDelete');
$('#'+indexed+'_edit').html('edit');
$('<span />', {'class':"delete",'id':indexed+'_delete'}).appendTo('#' + indexed + 'editDelete');
$('#' + indexed + 'delete').html('delete');
$('<span />', {'class':"contenidoDelContacto", 'id':indexed + 'Content'}).appendTo(contactoHolder);
$('#' + indexed + 'Content').html('<br />' + infoArray[1] + '<br />' + infoArray[2] + '<br />' + infoArray[3] + '<br />' + infoArray[4]);
$('#content').append(contactoHolder);

我在DOM中最终获得的唯一元素是

<div id="19" class="contactoUnexpanded contactoExpanded">
  Santiago
  <div id="19editDelete" class="editDelete"></div>
  <span id="19Content" class="contenidoDelContacto"></span>
</div>

我不知道为什么不应该按原样附加剩余的元素。

感谢您的帮助。

Answer 1

你的问题从这里开始：

$('<span />', {'class':"delete",'id':indexed+'_delete'}).appendTo('#' + indexed + 'editDelete');

由于您尚未将任何元素附加到DOM，('#' + indexed + 'editDelete')与任何内容都不匹配。选择器引擎只查看DOM中当前的元素，而不是JavaScript变量中的元素。

您可以通过立即附加contactoHolder来解决此问题：http://jsfiddle.net/mblase75/ptpgJ/

var contactoHolder = $('<div />', {'class':"contactoUnexpanded",'id':indexed});
$('#content').append(contactoHolder); 
// now the rest of your code

或者，尝试为每个新的jQuery元素分配一个变量名，并在添加或修改它们时引用这些变量。这应该更有效率，但除非您连续数百次或数千次这样做，否则您的用户可能无法察觉到这种差异：

var div1 = $('<div />', {'class':"editDelete", 'id':indexed+'editDelete'}).appendTo(contactoHolder);     
// ...
$('<span />', {'class':"delete",'id':indexed+'_delete'}).appendTo(div1);

所有在一起：http://jsfiddle.net/mblase75/B33wW/

var contactoHolder = $('<div />', {
    'class': "contactoUnexpanded",
    'id': indexed
});
contactoHolder.append(infoArray[0]);
var div1 = $('<div />', {
    'class': "editDelete",
    'id': indexed + 'editDelete'
}).appendTo(contactoHolder);

var span1 = $('<span />', {
    'class': "edit",
    'id': indexed + '_edit'
}).appendTo(div1);
$(span1).html('edit');

var span2 = $('<span />', {
    'class': "delete",
    'id': indexed + '_delete'
}).appendTo(div1);
$(span2).html('delete');

var span3 = $('<span />', {
    'class': "contenidoDelContacto",
    'id': indexed + 'Content'
}).appendTo(contactoHolder);
$(span3).html('<br />' + infoArray[1] + '<br />' + infoArray[2] + '<br />' + infoArray[3] + '<br />' + infoArray[4]);
$('#content').append(contactoHolder);

jQuery在创建它们时不会附加一些元素

1 个答案: