将元素应用于Div中的随机位置

时间:2016-12-08 09:23:28

标签: javascript jquery

早上好

我试图在一个部分中随机放置一些Font Awesome星,星数取决于数组中元素的数量。

我编写了以下代码,但它无效。我已经测试了jQuery和Font Awesome都正确加载了。

有人可以提出建议吗?

$(document).ready(function() {
        var star = '<i class="fa fa-star" aria-hidden="true"></i>';  // Define star to insert later
        var starArray = ["Apple", "Pear", "Banana"];  // Define array
        var section = document.getElementById('section-for-stars'); // Get id of section where stars are to be randomly places
        var width = section.offsetWidth; // Get section width
        var height = section.offsetHeight; // Get section height
        for (var i=0; i<starArray.length;i++) { // for loop array.length output star onto .section-contact
            var posx = Math.floor(Math.random()*width);  // Define random position x
            var posy = Math.floor(Math.random()*height);  // Define random position y
        star.appendTo(section).css({   // Append
            'position':'absolute',
            'left':posx+'px',
            'top':posy+'px',
        });
        }
        });    

1 个答案:

答案 0 :(得分:1)

首先需要找到一种方法将两个元素作为html dom元素而不是字符串开始和分段。那么只有你可以使用追加方法。

这里我使用了一个假div,以便我可以将元素作为DOM,你甚至可以使用$(star as string html)

  var div = document.createElement('div');
                    div.innerHTML = star;
                    var element = div.childNodes[0];
        console.log(element)
         $(element).appendTo(section).css({   // Append
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
    });

请参阅此http://jsfiddle.net/JfGVE/1721/