1

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

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

4 回答 4

2

使用prepend()代替after()：

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

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

于 2013-10-05T04:55:00.510 回答
2

我想你想要.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);   
});
于 2013-10-05T04:55:02.650 回答
1

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

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

演示：小提琴

于 2013-10-05T04:58:18.963 回答
1

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

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

APIs 可以使用的是

希望休息适合事业:)

代码

$(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>
于 2013-10-05T05:01:38.227 回答