2013-07-25 2 views
1

Я планирую добавить два div в определенный промежуток времени к основному div, который содержит 5 div. Когда я добавляю новый div, он должен скрыть последний div в списке.Подготовить div к div, скрывающему последнего ребенка

Здесь я сделал скрипку http://jsfiddle.net/vivekdx/53aht/

Html

<div class="container"> 
<div class="child">1</div> 
<div class="child">2</div> 
<div class="child">3</div> 
<div class="child">4</div> 
<div class="child">5</div> 
</div> 

CSS

.container{ width:300px; height:300px; background:#eee;} 
.child{ width:280px; margin:10px; height:40px; background:#ccc; float:left; text-align:Center; font-size:30px;} 

Script

for (i = 0; i < 2; i++) 
{  
setInterval(function() 
    { 
$(".container").prepend('<div class="child">6</div>'); 
    }, 1000); 
} 

Но это не работает хорошо.

Когда я предварять шестой ДИВ пятый должен быть спрятан также 4-й DIV для 7-DIV ...

А также я не обернув его правильно. Направляйте меня сюда

+0

setInterval не должен использоваться !!!!. Если выполнение вашего кода длиннее, чем интервал, то он будет выполнен в неизвестное время и может привести к другому порядку, чем тот, который вы ожидаете. : например: Итерация #X началась, но до завершения итерации # X + 1 началось и закончилось (так как интервал срабатывал каждые X миллисекунд), поэтому результаты будут выводиться с # X + 1 и только после этого #X. Ознакомьтесь с http://jsfiddle.net/53aht/11/ о том, как конвертировать код в setTimeout. – CodeWizard

ответ

1

Значит, вы хотите видеть только первые пять элементов. Вы можете ограничить сбор всех элементов, начиная с nth, используя метод jQuery slice().

// prepend a <div />, then get all the children, skip the first 5 and hide the rest. 
$(".container").prepend('<div class="child">6</div>').children().slice(5).hide(); 

Обновлено скрипку: http://jsfiddle.net/53aht/4/

+0

Спасибо человеку. Как я могу создать цикл для добавления только двух div ... – Jhonny

+0

Не могли бы вы уточнить? Если вы хотите добавить только два div после определенной задержки, вам следует использовать setTimeout. – pawel

+0

Да, я пробовал, что он бесконечно петлит, а не останавливается на двух divs. – Jhonny

1

Вот то, что вы хотите сделать. http://jsfiddle.net/53aht/11/

но имейте в виду, что ваш DOM растет каждый раз, когда вы добавляете новый div, поэтому подумайте об удалении (удалении) его формы DOM.

var counter = 10; 

function addDiv() { 
    $(".container").prepend('<div class="child">' + (++counter) + '</div>'); 
    setTimeout(addDiv, 1000); 
} 

addDiv(); 

CSS:

.container { 
    width:300px; 
    height:300px; 
    background:#eee; 
    overflow:hidden; 
} 
+0

Спасибо человеку .. Как остановить его после добавления двух div и задержать предварительный первый div – Jhonny

+0

Есть ли способ замедлить скрытие и показ divs – Jhonny

0

Попробуйте что-то вроде этого:

for (i = 0; i < 2; ++i) 
{ 
    setTimeout(function() { 
     $(".container").prepend('<div class="child">6</div>').children().slice(5).hide(); 
    } , i * 1000); 
}