将元素添加到兄弟

如何将元素添加到最近点击“添加图片”按钮？将元素添加到兄弟

这是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); 
});

后点击。步骤应该是这样的：

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

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

来源

2013-10-05 lipenco

我想你想.prepnd()，不.after()使它的第一个子元素。

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

见jQuery doc的.prepend()。

虽然这种风格的代码工作，你也可以使用.closest()略多健壮的代码：

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

来源

2013-10-05 04:55:02 jfriend00

使用prepend()代替after()：

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

after()地方的内容作为同级，而prepend()使得它的第一个子元素

来源

2013-10-05 04:55:00

看起来你想要的.editor元素之前要添加的元素，所以尽量

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

演示：Fiddle

来源

2013-10-05 04:58:18

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>

来源

2013-10-05 05:01:38

将元素添加到兄弟

回答

相关问题