Добавление элемента к родному брату

Question

Как добавить элемент в ближайший по нажатию кнопки "Добавить картинку"?

Это структура HTML:

 <div class="step"
   <div class="step-wrapper>
     <div class="editor"></div>
   </div>

   <div class="delete-picture">
   <div class="add-picture">
 </div>

 <div class="step"
   <div class="step-wrapper>
     <div class="editor"></div>
   </div>

   <div class="delete-picture">
   <div class="add-picture">
 </div>

 <div class="step"
   <div class="step-wrapper>
     <div class="editor"></div>
   </div>

   <div class="delete-picture">
   <div class="add-picture">
 </div>

и вот мой неправильный jquery:

$(document).on('click', '.add-picture', function() {
    var imageField = $('<img class="link" >');
    $(this).parent().find(".step-wrapper").after(imageField);   
});

после нажатия.step должен выглядеть так:

  <div class="step"
       <div class="step-wrapper>
          <img class="link" >
         <div class="editor"></div>
       </div>

       <div class="delete-picture">
       <div class="add-picture">
     </div>

Answer 1

Я думаю ты хочешь .prepnd()не .after() сделать его первым дочерним элементом.

$(document).on('click', '.add-picture', function() {
    var imageField = $('<img class="link" >');
    $(this).parent().find(".step-wrapper").prepend(imageField);   
});

Смотрите документ JQuery для .prepend(),

Хотя этот стиль кода работает, вы также можете использовать .closest() для немного более надежного кода:

$(document).on('click', '.add-picture', function() {
    var imageField = $('<img class="link" >');
    $(this).closest(".step").find(".step-wrapper").prepend(imageField);   
});

Answer 2

Использование prepend()вместо after():

$(this).parent().find(".step-wrapper").prepend(imageField);   

after() размещает контент как родного брата, тогда как prepend() делает его первым дочерним элементом

Answer 3

Похоже, вы хотите добавить элемент до .editor элемент, так что попробуйте

$(document).on('click', '.add-picture', function() {
    var imageField = $('<img class="link" >');
    $(this).parent().find(".step-wrapper .editor").before(imageField);   
});

Демо: скрипка

Answer 4

2 Рабочая демонстрация: http://jsfiddle.net/E78VA/1/ & http://jsfiddle.net/E78VA/

Также, пожалуйста, обратите внимание, что ваш HTML DOM был не прав, и есть несколько мелких ошибок, которые я исправил и в HTML. то есть отсутствующий конец div и т.п. :)

APIs могут быть использованы в

• prependTo http://api.jquery.com/prependTo/
• prepend http://api.jquery.com/prepend/

Надеюсь, что отдых соответствует делу :)

Код

$(document).on('click', '.add-picture', function () {
    var imageField = $('<img class="link" >');
    // $(this).parent().find(".step-wrapper").prepend(imageField); 
    $(imageField).prependTo($(this).parent().find(".step-wrapper"));
    alert($(this).parent().find(".step-wrapper").html());
});

HTML

<div class="step">
    <div class="step-wrapper">
        <div class="editor">test</div>
    </div>
    <div class="delete-picture">delete</div>
    <div class="add-picture">add</div>
</div>
<div class="step">
    <div class="step-wrapper">
        <div class="editor"></div>
    </div>
    <div class="delete-picture"></div>
    <div class="add-picture"></div>
</div>
<div class="step">
    <div class="step-wrapper">
        <div class="editor"></div>
    </div>
    <div class="delete-picture"></div>
    <div class="add-picture"></div>
</div>