Question

在这个jquery插件中：

http://www.stahs.org.uk/jquery.infinitecarousel.bak

有这条线：

            $(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');

问题是当它将文本节点转储到此div中时，它会与div的顶部对齐。我希望文本与div的底部对齐。所以我决定在这个div中创建另一个div：

$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            console.log($('#textholder'+randID));
            $('#textholder'+randID).append('<div style="display:table-cell; height: 94.25px; width: 1000px; vertical-align:bottom;"></div>');

控制台输出：

[div#textholder35196647.textholder]
[div#textholder62315889.textholder]
[div#textholder95654959.textholder]

但是，我的上述追加不起作用。嵌套的div永远不会出现，所以当我稍后这样做时：

                    if(t != null)
                {
                    $('#textholder'+randID+' div').html(t).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();
                }

没有文字可见，因为嵌套的div永远不会被创建。

所以我非常困惑。如果您查看原始插件，此行有效：

 $('#textholder'+randID+' div').html(t)

如果在我创建它之后立即添加它，它是如何能够在这里定位正确的div的，它不存在，正如你们所建议的那样？

这也不起作用：

                var $texthold = jQuery('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            $(obj).append($texthold);
            $texthold.append('<div></div>')

感谢您的回复。

Answer 1

听起来似乎randID ...行和你添加的$(obj).append行之间的$('#textholder'+randID)被修改了。您是否确定randID的值在两行上相同？

Answer 2

你确定$（obj）真的是指你要追加的元素吗？为了以防万一，您可能想要反过来试试：

$('<div id="textholder'+randID+'" class="textholder" style="position:absolute;' 
    +'bottom:0px;margin-bottom:'+(-imgHeight*o.textholderHeight)
    +'px;left:'+$(obj).css('paddingLeft')+'"></div>'
).appendTo(obj);

Answer 3

尝试：

$(obj).after('html');

文档为here。

Answer 4

看来这很有效：

            function showtext(t)
            {

                if(t != null)
                {   

                    if(typeof $('#textholder'+randID).find('div')[0] == 'undefined'){
                        $('#textholder'+randID).append('<div style="display:table-cell; height: 94.25px; vertical-align:bottom;"></div>');
                    }

                    $('#textholder'+randID+' div').html(t);

                    $('#textholder'+randID).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();

                }
            }

这有点疯狂我不得不求助于使用typeof检查div是否被声明。为什么插件的作者决定随机分配整数作为div的ID是超出我的。通过这样做，似乎javascript难以保留随机创建的ID。这是我能想出的不寻常行为的唯一解释。

无法使用jQuery（JavaScript）追加html

4 个答案: