Добавить 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

Я забыл про px: http://jsfiddle.net/4PYRw/1/ – XiM

Большое спасибо :) +1 – Youss

Вам нужно получить высоту/ширину каждого объекта, а не один раз. 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

@Youss Я обновил свой пример. Вам нужно удвоить ширину, если вы хотите увидеть столько же оригинала, сколько и до добавления. Мне также пришлось добавить '! Important' в' 'over" 'div, чтобы переопределить ширину, определенную css. Если вы не хотите видеть оригинал и просто хотите увидеть наложение, удалите только '* 2'. – ryan

Вы можете использовать синтаксис функции для 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

Спасибо, его все еще не полностью работает, но в leat я получаю размеры. «Over» div должен получить размеры элемента, к которому он присоединен. Например: диапазон имеет 200 + 50, поэтому добавочный div.over должен иметь 200px + 50px ... – Youss

Что-то, как это должно работать:

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

Edit: вы должны быть нацелены все внутри тела, а не только все, что в противном случае вы получаете DIV вне тегов тела.

источник

2013-03-16 19:33:58

Такая же проблема здесь, диапазон имеет разные размеры – Youss

@Youss Это не span div, то есть тот, который помещается в тег body (для меня он отличается, поскольку у меня другое разрешение экрана). См. Мое редактирование, чтобы обойти это. –

Итерации по всем элементам с каждой функцией.

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

Дива «над» должен охватывать все элементы, так как теперь он не покрывает элементы «шириной», а диапазон имеет разные размеры. – Youss

Добавить div ко всем элементам в документе

ответ

Смежные вопросы