在另一个现有div之后动态添加div的困难

Question

我正在尝试使用与此中相同的点滑块。但我很难得到它。 demo

这是html代码

<div id="demo3" class="webwidget_slideshow_dot">
        <ul>
            <li><a href="link1" title="Sky"><img src="images/img_1.png" width="517" height="343" alt="slideshow_large"/></a></li>
            <li><a href="link2" title="Sea"><img src="images/img_2.png" width="517" height="343" alt="slideshow_large"/></a></li>
            <li><a href="link3" title="Flower"><img src="images/img_3.png" width="517" height="343" alt="slideshow_large"/></a></li>

        </ul>
    </div>

这是脚本

function init(){
        x.find("ul:first").wrap('<div class="slides_box"></div>');
        x.css("width",q).css("height",r);
        x.find(".slides_box").css("width",q).css("height",r);
        x.find("ul:first").width(parseInt(q)*y);
        x.find("ul:first").children("li").css("width",q).css("height",r);
        x.find("ul:first").children("li").children("a").children("img").css("width",q).css("height",r);
        x.find('#demo3').after('<div class="title_thumb_box"></div>');
        x.find(".title_thumb_box").append('<div class="title_box"></div>');
        x.find(".title_thumb_box").append('<div class="thumb_box"></div>');
        x.find(".title_thumb_box").css("background-color",sf);
 }

在脚本中，<div class="slides_box"/>动态包装列表。然后在<div class"title_thumb_box">之后添加div class='slides_box'。这就是在容器内显示点的原因。

我正在尝试在<div id="demo3"/>之后添加它。当我尝试时我不能。 我试图在幻灯片容器“＃demo3”外面显示这些点，以便我可以像在img中一样为容器添加边框。

这是jsfiddle

Answer 1

如果我理解正确，你想在＃demo3容器外添加.title_thumb_box。

为此，只需更改一行：

x.find('#demo3').after('<div class="title_thumb_box"></div>');

到

x.find('.slides_box').after('<div class="title_thumb_box"></div>');

这将在＃demo3 div。

之后添加.title_thumb_box