Question

Код:

function showLetter() { 
    setInterval(function() { 
     var letter = imgsArray[random()]; 
     var top = random(); 
     var left = random(); 
     $("div").append("<img src='imgs/" + letter + ".png'>"); 
     $("div").last().css({"position": "absolute", "top": top + "px", "left": left + "px"}); 
    }, 1000); 
} 

В каждой позиции массива imgsArray, у меня есть имя образа.

Что я хочу сделать: Добавьте изображение каждые 1000 мс, придав ему случайное положение на экране. (Если можно предотвратить перекрытие, это было бы здорово, но я думаю, что на это уже был дан ответ).

Что она делает: каждые 1000 мс, это добавляет новый образ буквы и дает те же свойства для всех изображений, так что все они в конечном итоге выровнены по горизонтали :)

Я действительно дон Не понимаю, почему это происходит. С $("div").last().css(), я не выбираю последнее изображение, добавленное в div и меняя только его свойства?

Заранее спасибо.

Answer 1

$("div").last() дает вам последний элемент в объекте jquery `$("div"). В этом объекте jQuery нет изображений.

Возможно, что вы хотите:

$("div img").last() 

Но, что весьма неэффективно. Если вы просто хотите работать на вновь созданный объект изображения, то вы можете просто работать на нем прямо:

function showLetter() { 
    setInterval(function() { 
     var letter = imgsArray[random()]; 
     var top = random(); 
     var left = random(); 
     var img = $("<img src='imgs/" + letter + ".png'>"); 
     img.css({"position": "absolute", "top": top + "px", "left": left + "px"}); 
     $("div").append(img); 
    }, 1000); 
} 

Answer 2

Вы могли бы хотеть рассмотреть что-то вроде этого:

var div = $('<div/>').css({position:'absolute'....}).appendTo('body'); 
var img = $('<img/>', {src:'imgs/' + letter + '.png'}).appendTo(div); 

Это добавит новый < div> с изображением до < корпус>.