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

Question

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

0

Я хочу добавить div с именем класса "новая рыба" динамически после тега изображения в разделе div, когда я нажимаю кнопку "Отправить". новый div должен иметь новый идентификатор вместе с ним. Основываясь на количестве кликов, нужно добавить столько div. Когда я попытался с приведенным ниже кодом, он не добавился.

  <section class="main-content" id="container">
  <div class="oyster"> </div>
  <div class="small-fish" id="fish1"> </div>
  <div class="medium-fish" id="fish2"> </div>
  <div class="large-fish" id="fish3"> </div>

  <img src="Assets/Arrow.png" class="right-arrow" alt="arrow" id="rightarrow" /> 

  </section>

 <footer> <input type="button" value="Post" class="post-button" /></footer>

/*Jquery */
$('.post-button').on('click',function(e){

    //$('#container img:last-child').append('<div class="small-fish"> </div>');
    $('#rightarrow').append('<div class="new-fish"> </div>');



});

user3218194 09 май 2014, в 09:20

Источник

Теги:

jquery

css

html5

animation

3 ответа

Ещё вопросы

user1498339 · Answer 1 · 2014-05-09T04-38-00.000Z

Вы должны поместить свой код внутрь

$(document).ready(function() { ... })

так что он будет вызываться после загрузки dom, и кнопка с post-button класса будет существовать точно.

ID rightarrow ссылается на изображение, и вы не можете поместить div внутри изображения: то, что вы хотите сделать, - это добавить раздел div в раздел с main-content id, и он будет добавлен в конец раздела сразу после изображения. Конечно, когда вы добавляете еще один div, он будет помещен после добавления предыдущего.

Что касается идентификатора, вы можете сохранить переменную, чтобы считать число кликов.

$(document).ready(function() {

    var numberOfClicks = 0;

    $('.post-button').on('click',function(e){
        numberOfClicks++;
        $('#container').append('<div id="appendedDiv'+numberOfClicks+'" class="new-fish"> </div>');

    }); 

});

Arun P Johny · Answer 2 · 2014-05-09T05-42-00.000Z

Вы не можете добавить элемент изображения, которое вы, возможно, ищете, это вставить new-fish в качестве следующего брата изображения, а затем использовать .after()

$('#rightarrow').after('<div class="new-fish"> </div>');

Демо: скрипка, демо2

Как можно убедиться, что каждый div имеет новый идентификатор?

Suresh Ponnukalai · Answer 3 · 2014-05-09T04-49-00.000Z

используйте это...

$(document).ready(function(){
var i=0;
$('.post-button').on('click',function(e){
$('#container').append("<div class='new-fish' id='new-fish"+i+"'>coming </div>");
i++;
}); 

});