javascript - jQuery - 从 html 构建对象

Question

我的最终目标是获取我网站上的信息。我正在尝试返回类似的内容:

{
    Goals: {
       1: 'ET6',
       2: 'ET10'
    },
    Sub-Off: 80,
    Sub-On: 'ET1'
}

所以我有以下标记(巨大的换行符是必要的):

<span class="stats jamie">

        <img src="/client/images/icon-ball.gif" alt="Goals" width="13" height="13">
        ET:6,ET:10

        <img src="/client/images/suboff.gif" alt="Sub-Off" width="13" height="13">
        80      

        <img src="/client/images/subon.gif" alt="Sub-On" width="13" height="13">
        ET:1

                                        </span>

到目前为止我所拥有的

$('.jamie').find('img').each(function(index){
    console.info($(this).attr('alt'));
});

Answer 1

var stats = {};

$('.jamie img').each(function(){
    var name = $(this).attr('alt');
    var data = $(this)[0].nextSibling       // Get the next node
                         .nodeValue         // Get its text value
                         .trim()            // Remove the extra spaces
                         .toLowerCase()     // to lower case
                         .replace(/:/g,'')  // remove colons
                         .split(',');       // split on commas
    stats[name] = data;                     // add to object
});

console.log(stats);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span class="stats jamie">






        <img src="/client/images/icon-ball.gif" alt="Goals" width="13" height="13">
        ET:6,ET:10






















        <img src="/client/images/suboff.gif" alt="Sub-Off" width="13" height="13">
        80






















        <img src="/client/images/subon.gif" alt="Sub-On" width="13" height="13">
        ET:1











                                        </span>