Question

我想创建图像缩放图标。富文本编辑器我正在使用像

这样的写法

<p>
  <a title="" data-original-title="" href="myimage.jpg" class="lightbox gallery cboxElement" rel="lightbox[145]">
     <img style="padding-left: 10px; float: right;" src="myimage.jpg" alt="" class="img-responsive-rte" height="140" width="130">
  </a> 
here' some text ......
</p>

每张图片。

遗憾的是，css-content-property不能与img一起使用，因此我需要添加/附加标记以便定位图标。

我正在使用 $("<div class='enlargeicon'></div>").appendTo('.cboxElement'); 添加标签。

到目前为止一切顺利：我还需要为每个图像添加浮点值并将其插入到图标的div中。

感谢您的帮助！

Answer 1

您可以尝试以下代码：

$("<div />", {class: 'enlargeicon'}).appendTo('.cboxElement').css('float', $('.cboxElement').children("img").css('float'));

编辑。再试一次，请等。

这里是Fiddle。它似乎有效。

确保作为父元素的元素具有您想要继承的属性。

已编辑：获取float元素的img位置。 :)感谢您的建议Jason。

Answer 2

使用此语法。

var imageFloat = $('.cboxElement a img').css('float'); // get the float value of the img
$("<div class='enlargeicon' style='float:"+ imageFloat  +"'></div>").appendTo('.cboxElement');

Answer 3

我意识到我必须遍历文档。警报显示每个浮动的正确值。但是如何在跨度内插入此值？

$(document).ready(function(){

$('.img-responsive-rte').each(function(i) {
    //alert($(this).css('float'));  
    $(this).after('<span style="float:  ">');
})


});

非常感谢

我也尝试了这个，它为每个浮点输出正确的值 - 但也在img-tag内（而不是后面）。我如何改变它以使其工作？

$('.img-responsive-rte').each(function() {
  var x = $( this ).css( "float" );
  $( ".img-responsive-rte" ).html( "That div is <span style='float:"    x + ";'>" + x + "</span>." );       
});

谢谢你的回复

是否有可能通过使用after，append，html或其他任何内容来获取标记？

使用父标记的样式属性追加新标记

3 个答案: