将div附加到文档中的所有元素

我想将一个div附加到文档中的所有元素。 div应该与它们所附加的元素具有相同的height和weight。为了得到height和width我设置这样的变种：将div附加到文档中的所有元素

var height = $(this).height(); 
var width = $(this).width();

并添加这样的：

$('*').append('<div class="over" style="height:'+height+';width:'+width+';">'+height+' + '+width+'</div>');

正如你可以在这个Fiddle(LINK)它看到的不是真正的工作了。它给我相同的尺寸251 + 420这很奇怪，因为没有元素具有这些尺寸。

如何将div.over附加到文档中的所有(*)元素，并将其尺寸设置为要附加到的元素？（我必须使用.each吗？）

来源

2013-03-16 Youss

可能，这将是解决方案：

$('body *').each(function(){ 
    var t = $(this), w = t.width(), h = t.height(); 
    t.append('<div class="over" style="height:'+h+'px;width:'+w+'px;">'+h+' + '+w+'</div>'); 
});

来源

2013-03-16 19:52:05 XiM

同样的问题.. div.over没有得到元素的尺寸其附加在 – Youss 2013-03-16 19:54:34

我忘了px：http://jsfiddle.net/4PYRw/1/ – XiM 2013-03-16 19:58:23

非常感谢你:) +1 – Youss 2013-03-16 20:00:23

您需要获取每个对象的高度/宽度，而不只是一次。 See this fiddle

$('body *').each(function (i, v) { 
    var $this = $(this), 
     h = $this.height(), 
     w = $this.width(); 
    $this.css({ height: h, width: w * 2 }); 
    $this.append('<div class="over" style="display:block; height:' + h + 'px !important;width:' + w + 'px !important;">' + h + ' x ' + w + '</div>'); 
});

来源

2013-03-16 19:33:26 ryan

但跨度为200 + 50，而不是132 + 419，因为它是在你的代码 – Youss 2013-03-16 19:38:05

展示@Youss我更新了我的例子。如果你想在追加之前看到原始数据，你必须将宽度加倍。我还必须在''over''div上添加'！important'以覆盖由css定义的宽度。如果你不想看到原始图片，只想看到叠加层，只能删除'* 2'。 – ryan 2013-03-16 20:00:13

您可以使用函数语法append()像这样：

$('body *').append(function(){ 
    var height = $(this).height(), 
     width = $(this).width(); 

    return '<div class="over" style="height:' 
      +height+';width:'+width+';">'+height+' + '+width+'</div>'; 
});

注：我否则你会遍历元素改变了你的选择，如<head>，这可能会导致随机违规。

Here's a demo。

来源

2013-03-16 19:33:40

谢谢，它仍然不完全工作，但在我看到尺寸。 “over”div应该获得被附加到的元素的尺寸。例如：跨度有200 + 50，所以被附加的div.over应该有200px + 50px以及... – Youss 2013-03-16 19:53:32

像这样的东西应该工作：

$('body *').each(function(i,el){ 
    var height = $(el).height(); 
    var width = $(el).width(); 
    $(el).append('<div class="over" style="height:'+height+';width:'+width+';">'+height+' + '+width+'</div>'); 
});

编辑：你应该针对身体内的一切，不只是一切，否则你会得到一个div身体标记之外。

来源

2013-03-16 19:33:58

同样的问题在这里，跨度有不同的尺寸 – Youss 2013-03-16 19:41:39

@Youss那不是span div，那就是放在'body'标签上的标签（这对我来说是不同的，因为我有不同的屏幕分辨率）。看看我的编辑来解决这个问题。 – 2013-03-16 19:47:48

使用每个函数遍历所有元素。

$('*').each(function(index, element){ 
    $(element).append('<div class="over" style="height:'+$(element).height()+';width:'+$(element).width()+';">'+$(element).height()+' + '+ $(element).width()+'</div>'); 
});

工作实例：http://jsfiddle.net/d4k6g/4/

来源

2013-03-16 19:34:57

div“over”应该跨越元素，因为现在它不会覆盖那里的元素“width”并且跨度具有不同的尺寸 – Youss 2013-03-16 19:40:38

将div附加到文档中的所有元素

回答

相关问题