0

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

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

4

5 回答 5

2

您需要获取每个对象的高度/宽度，而不仅仅是一次。看到这个小提琴

$('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-16T19:33:26.037 回答
1

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

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

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

注意：我已经更改了您的选择器，否则您将循环遍历诸如 之类的元素<head>，这可能会导致随机异常。

这是一个演示。

于 2013-03-16T19:33:40.617 回答
1

像这样的东西应该工作：

$('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-16T19:33:58.037 回答
1

使用 each 函数遍历所有元素。

$('*').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-16T19:34:57.407 回答
1

可能这将是解决方案：

$('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-16T19:52:05.347 回答