Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Ширина элемента по соседнему без использования ID (https://javascript.ru/forum/jquery/46080-shirina-ehlementa-po-sosednemu-bez-ispolzovaniya-id.html)

Mel 27.03.2014 11:41

Ширина элемента по соседнему без использования ID
 
Есть div по ширине окна.
В него добавляются динамически через jquery элементы. Сколько будет этих элементов и какой они будут ширины, неизвестно.
Надо добавить последний div, заполнивший собой остаток до правого края родительского, изменяющийся при изменении размера окна.

Дело осложняется тем, что родительских div'ов может быть несколько.

При создании я имею jquery'евские объекты, которые и выкладываются. Задавать объектам ID нереально, это надо громоздить целую систему именования. Наверняка как-то можно задать css таким образом, чтобы width у последнего div'а был динамическим, но вот как?

Использоваться будет только под IE, DOCTYPE //W3C//DTD HTML 4.01//EN, так что можно использовать expression, но как их задать в jquery?

danik.js 27.03.2014 11:56

А причем тут ID вообще?
Используй либо таблицу (можно просто css display:table-cell) либо когда добавляешь элемент, пересчитывай ширину заполнителя и обновляй ее.

krasovsky 27.03.2014 12:10

var parent = $('div')//это твой родительский див
var child = div.children('div');//это дивы внутри
var childW;
child.each.function(){
childW = childW +$(this).width();//ширина всех child
}

var newDiv=$('<div>,{id:'cap'}').css({width:parent.width()-childW});
paren.append(newDiv);

Это при вставке последнего дива
при ресайзе окна, вычислять ширину всех дивов кроме него, и изменять его ширину соответственно

Mel 27.03.2014 13:04

Цитата:

Сообщение от danik.js (Сообщение 304648)
пересчитывай ширину заполнителя и обновляй ее.

В конечном итоге к тому и прихожу, что рассчитываю размер по onresize. А хочется тупо в css expression записать и не думать больше об этом.

danik.js 27.03.2014 15:19

Цитата:

Сообщение от Mel
А хочется тупо в css expression записать и не думать больше об этом.

Какая разница между window.onresize = doResizing и expression: "doResizing"? Экспрешны тормозят сильно, потому что вызываются чаще чем нужно. А так ты можешь навешать расчеты только на нужное событие. Ну не прелесть ли?

Aetae 27.03.2014 19:34

Есть вариант проще. Если они все добавляются в строку, то задавать им float:left, а последний оставить без ширины и float - он сам растянется как надо.
<div>
    <div style="height:100px; background:#aaf; float:left; width:200px;"></div>
    <div style="height:100px; background:#faa; float:left; width:50px;"></div>
    <div style="height:100px; background:#afa; float:left; width:100px;"></div>
    <div style="height:100px; background:#000"></div>
</div>

рони 27.03.2014 21:51

Aetae,
так он же растянется на всю ширину страницы?

Aetae 27.03.2014 23:08

рони, 0_о? На всю ширину контейнера же...
<div style="width:70%;">
    <div style="height:100px; background:#aaf; float:left; width:200px;">1</div>
    <div style="height:100px; background:#faa; float:left; width:50px;">2</div>
    <div style="height:100px; background:#afa; float:left; width:100px;">3</div>
    <div style="height:100px; background:#aaa">4</div>
</div>

рони 27.03.2014 23:16

Aetae,
ну контейтера а контейнер
Цитата:

Сообщение от Mel
Есть div по ширине окна.

непонятно зачем но данное ниже условие в этом случае невыполняется
Цитата:

Сообщение от Mel
Надо добавить последний div, заполнивший собой остаток до правого края родительского, изменяющийся при изменении размера окна.


Aetae 27.03.2014 23:51

рони, не понял о чем ты, если честно.)


Часовой пояс GMT +3, время: 22:58.