сложность динамического добавления div после другого существующего div

#jquery #slider

#jquery #ползунок

Вопрос:

Я пытаюсь сделать точечный слайдер таким же, как в этом . Но у меня возникают трудности с его получением. ДЕМОНСТРАЦИЯ.

Вот 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

1. В связанной демонстрации я получаю три ошибки: Unexpected token < , jQuery is not defined и $ is not defined . Это наводит меня на мысль, что вы не загружаете jQuery.

2. В скрипте я получаю p is not defined . Пожалуйста, проверьте свой код на определение p .

3. Я обновил вашу скрипку, так что изображения также отображаются.

4. @Rob W — Спасибо, но я хочу, чтобы точки были вне контейнера, как на изображении выше

Ответ №1:

Если я правильно понимаю, вы хотите добавить .title_thumb_box вне контейнера #demo3.

Для этого просто измените строку:

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

Для

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

Это добавит .title_thumb_box после div #demo3.

1. Это должно иметь право. Я тоже так думал и попробовал это. Это не работает. Он не полностью отображает точки. Я не мог понять y? вы можете посмотреть демонстрацию здесь haripriyaa.zymichost.com//bit-torrent/1276245126/demo_1.html

2. Хорошо, вы можете вернуть его обратно. Я думаю, это потому, что используемый CSS применяется к классам внутри div slides_box

3. хотя css не был применен, я должен иметь возможность видеть динамически добавляемые теги <div> . Но это не отображается в разметке

4. Да, я только что заметил это, странно