Question

我想在文档中的所有元素后附加一个div。 div应该与要附加的元素具有相同的height和weight。要获得height和width，我设置了这样的var：

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吗？）

Answer 1

您需要获取每个对象的高度/宽度，而不仅仅是一次。 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>');
});

Answer 2

您可以使用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

Answer 3

这样的事情应该有效：

$('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。

Answer 4

使用每个函数迭代所有元素。

$('*').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/

Answer 5

可能这将是解决方案：

$('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>');
});

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

5 个答案: