Динамически добавленные элементы не переносятся - PullRequest
Новая
       3

Динамически добавленные элементы не переносятся

0 голосов
/ 11 октября 2010

Мне нужно динамически добавлять элементы на страницу, но, к сожалению, когда я делаю это с помощью метода jquery .append (), кажется, что элементы действуют не так, как другие элементы на странице, несмотря на тот же CSS.

Я создал пример страницы , которая воспроизводит проблему.

вверху находится список (ul с кучей li) со статически определенными элементами. Ниже hr устанавливается ul таким же образом, но li s добавляются динамически (по одному каждые 600 мс). Полученный HTML-код выглядит идентично мне (за исключением идентификатора), но результаты явно отличаются: * Интервал на li короче * более серьезно, они не переносятся на ширину браузера: они просто вызывают горизонтальную прокрутку.

Может кто-нибудь объяснить, почему результаты отличаются?

В конечном счете, я хочу, чтобы вновь добавленные элементы были перенесены в размер своего контейнера. Мне кажется, что этот CSS должен работать ..

Ответы [ 2 ]

1 голос
/ 11 октября 2010

добавление новой строки после каждого <li> исправления. 

  function addRandom() {
        $('#cloud2').append('<li><a href="#">test</a></li>\r\n');
  }

Поскольку ваши теги li оформлены как встроенные элементы, пробел имеет значение.

РЕДАКТИРОВАТЬ: добавлениекосмос тоже работает: 

  function addRandom() {
        $('#cloud2').append('<li><a href="#">test</a></li> ');
  }
0 голосов
/ 11 октября 2010

Я исправил это для вас, теперь оно деформируется, просто укажите предпочитаемую ширину 

 <html> 
<head> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
  $(document).ready(function() {
        setInterval(addRandom,600);
  });

  var cnt = 0;
  function addRandom() {
        $('#cloud2').append('<li><a href="#">test</a></li>');
  }
  </script> 
  <style type="text/css"> 

div#container{
    width:960px;
    margin:auto;
    background-color :#fff;
    height:100%;
    position:relative;
    overflow:hidden;
        -moz-border-radius:5px;
    clear:both;
}
.list {
        list-style-type:none;
        margin:0;
        padding:0;
    float:left
  }
  .cloud{
    padding:0;margin:0;
   }
  .cloud li {
        display:inline;
        margin-right:15px;
        list-style:none outside none;
        background:black;
    float:left;
    padding:5px;
    margin:3px;
        border-radius:5px;

  }
 .cloud li a{
    color:white;
    font-decoration:none;
  }
p{
clear:both;
}
 </style> 
</head> 
<body> 
 <div id="container">
<ul class="cloud"  id="cloud1"> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
  </ul>
<p> <hr/>  </p>
<ul class="cloud" id="cloud2"> 
</ul> 
</div>

</body> 
</html>
...