将HTML页面内容存入json数组

1，HTML布局如下：

　　　　　　　<ul id="ul">
                <li href="####">
                    <b>#####</b><span>####</span><a href="#####"></a>
                </li>
                <li href="####">
                    <b>#####</b><span>####</span><a href="#####"></a>
                </li>
                <li href="####">
                    <b>#####</b><span>####</span><a href="#####"></a>
                </li>
                <li href="####">
                    <b>#####</b><span>####</span><a href="#####"></a>
                </li>
            </ul>

2，获取json数组JavaScript代码如下：

var $length = $("#ul li").size()+1;
            var arr = new Array();

            for(var i = 1;i < $length;i ++){
                var $thisImg = $('#ul li:nth-child('+i+')').attr("href");
                var $thisName = $('#ul b:eq('+(i-1)+')').text();
                var $thisMusicName = $('#ul span:eq('+(i-1)+')').text();
                var $thisSrc = $('#ul a:eq('+(i-1)+')').attr("href");

                var data = {
                    img:$thisImg,
                    name:$thisName,
                    musicName:$thisMusicName,
                    src:$thisSrc
                }
                arr.push(data);

            }
            console.log(arr)

3，浏览器显示：