JQuery附加到div

时间:2012-11-28 09:04:59

标签: jquery append

<body>
<div id="scrollup">
<div class="link">
<br><a href="http://www.google.com/">Google1</a>
<br><a href="http://www.yahoo.com/">Yahoo</a>
</div>
<div class="link">
<br><a href="http://www.Microsoft.com/">Microsoft</a>
<br><a href="http://www.Apple.com/">Apple</a>
</div>
<div class="link">
<br><a href="http://www.cisco.com/">Cisco</a>
<br><a href="http://www.Dell.com/">Dell</a>
</div>
</div>
</body>

我想使用JQuery Append将Href列表添加到类中,我有存储在数组中的超链接列表,我想将它们分组添加,代码显示我如何定义hrefs

请注意,我不知道数组中有多少个超链接,而且(class =“link”)的数量取决于添加的超链接数量(例如,每个类中有4个href)

1 个答案:

答案 0 :(得分:0)

这个怎么样

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Demo</title>
            <script src="jquery-1.8.3.min.js"></script>

            <script>
                var links = ['http://stackoverflow.com/questions/13601373/jquery-append-to-div',
                        'http://jsfiddle.net/VCjLX/',
                        'https://www.google.at/'];


                $(function () {
                    //get all containers where we append the links
                    var containers = $('.link');
                    //iterate over all links
                    $(links).each(function () {
                        var link = $('<a>', {
                            href: this,
                            text: this
                        });
                        //append the link to the containers (it gets appened to all elements!)
                        containers.append(link);
                        //append the line break (again to all elements)
                        containers.append('<br />');
                    });
                });

            </script>
        </head>
        <body>
            <div class="link"></div>
            <br />
            <div class="link"></div>
        </body>
    </html>

小提琴演示:http://jsfiddle.net/R2kTC/