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

使用prepend()代替after()：

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

after()将内容放置为兄弟，而prepend()使其成为第一个子元素

Answer 2

我认为您希望.prepnd()而非.after()将其作为第一个子元素。

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

请参阅.prepend()的{{3}}。

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

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

Answer 3

您希望在.editor元素之前添加元素，因此请尝试

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

演示：Fiddle

Answer 4

2工作演示：http://jsfiddle.net/E78VA/1/＆amp; http://jsfiddle.net/E78VA/

另外请注意你的html DOM不对，并且我已经纠正了一些小错误。即缺少结束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>

将元素附加到兄弟姐妹

4 个答案: