将元素附加到同级答案

【问题标题】：Appending element to the sibling将元素附加到同级
【发布时间】：2013-10-12 05:05:59
【问题描述】：

如何在单击“添加图片”按钮时将元素附加到最近的位置？

这是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>

【问题讨论】：

标签： javascript jquery dom dom-manipulation

【解决方案1】：

我认为您希望 .prepnd()，而不是 .after() 使其成为第一个子元素。

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

对于.prepend()，请参阅jQuery doc。

虽然这种代码风格有效，但您也可以使用 .closest() 来获得更健壮的代码：

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

【讨论】：

【解决方案2】：

使用prepend() 代替after()：

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

after() 将内容作为同级元素，而prepend() 将其作为第一个子元素

【讨论】：

【解决方案3】：

看起来你想在.editor元素之前添加元素，所以试试

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

演示：Fiddle

【讨论】：

【解决方案4】：

2 工作演示：http://jsfiddle.net/E78VA/1/ & http://jsfiddle.net/E78VA/

还请注意您的 html DOM 不正确，并且有一些小错误我也纠正了您的 HTML。即缺少结尾div 等:)

APIs可以用

prependTohttp://api.jquery.com/prependTo/
prependhttp://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>

【讨论】：