Добавить контент в случайном месте с помощью jQuery? - PullRequest
Новая
       28

Добавить контент в случайном месте с помощью jQuery?

4 голосов
/ 04 ноября 2011

Мне нужно отобразить список элементов на странице, и эта страница обновляется с помощью AJAX.Каждый раз, когда новый элемент передается клиенту, я хочу, чтобы он появлялся в произвольном месте внутри моего ul list.

Вот пример списка, о котором я говорю: http://jsfiddle.net/XEK4x/

HTML 

<ul class="itemlist">
    <li>Item #2</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

CSS 

.itemlist li{
    width:100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
    float: left;
    background: #dddddd;
}

Есть идеи, как добавить новые элементы в произвольном месте в списке с помощью jquery?Я знаю, что могу сделать что-то вроде $(li_element).appendTo(".itemlist");, но это добавит его в конец списка.

Другая проблема, которая может быть проблемой, заключается в том, что каждый li element перемещается влево.Поэтому, когда новый элемент добавляется в середину, все, что находится после этого элемента, будет сдвинуто на одну точку вправо.

Я мог бы пойти с several ul lists floated left и li's stacked under each other, поэтому, когда новый элементрендеринг списка просто приводит к вытеснению get, но если я сделаю это случайно, некоторые списки ul могут получиться длиннее других, что также будет выглядеть странно.

Ответы [ 3 ]

6 голосов
/ 04 ноября 2011 
var $lis = $(".itemlist li");
$lis.eq(Math.floor(Math.random()*$lis.length)).after(
                                            /* your new content here */ );

Метод .after () добавляет брата, поэтому выберите случайный элемент из списка <li> элементов и используйте на нем .after(). Или .before().

P.S. Что касается недавно добавленного элемента, толкающего остальных вправо, почему это проблема? Разве это не нормально, если у вас есть горизонтальный макет для вашего списка?

1 голос
/ 05 сентября 2013

с принятым ответом новый элемент никогда не вставляется первым.позиция, куда это может быть вставлено, является числом элементов плюс один.между элементами + начало + конец.

код не очень хорош, но исправляет его.

http://jsfiddle.net/XEK4x/38/

var $lis = $(".itemlist li");
var pos = Math.floor(Math.random() * ($lis.length + 1)) - 1;
if(pos != -1){
  $lis.eq(pos).after("<li>new</li>");
} else{
  $lis.eq(0).before("<li>new first</li>");
}
1 голос
/ 04 ноября 2011

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

var randomNum = Math.floor(Math.random()*9);
$(".itemlist li").eq(randomNum).append("HI");

Просто создайте случайное число в JavaScript.Затем выберите этот случайный элемент в списке и добавьте новый контент.Если я не понимаю вопрос.

...