<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<script type="text/javascript" src="js/js1.js"></script>-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/css1.css">

    <script>
        $(document).ready(function () {
            $("input:eq(0)").click(function () {
                $("p").each(function () {
                    var parts=$(this).html().split(" ");
                    $(this).css({"font-size":parts[1]+"px",color:parts[0]});
                });
            });
            $("input:eq(1)").click(function () {
                var items=$("p").map(function (value) {
                    var parts=$(this).html().split(" ");
                    return {color:parts[0],size:parts[1]};
                }).get();

                for(var idx in items){
                    var item=items[idx];
                    var span=$("<span>"+item.color+"</span>");
                    var size=item.size*5;
                    span.css({
                        "background-color":item.color,
                        "font-size":item.size+"px",
                        width:size,
                        height:size
                    });
                    $("div").append(span);
                }
            });
        });
    </script>

</head>
<body>

    <input type="button" value=".each()">
    <input type="button" value=".map()">

    <p>red 15</p>
    <p>blue 30</p>
    <p>gray 20</p>
    <p>black 40</p>
    <p>yellow 15</p>
    <p>green 35</p>

     <div></div>

</body>
</html>
p{margin: 0;padding:0}
span{
    display: inline-block;
    color:white;
    text-align: center;
}