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>

Answer 2

a = {}; 
 
$('.jamie').find('img').each(function(){ 
 
    var textVal = $.trim(this.nextSibling.nodeValue).replace(/:/,'').toLowerCase(); 
 
    var textValArray = textVal.split(','); 
 
    var textValObj = {}; 
 
    if(textValArray.length > 1){ 
 
     $.map(textValArray , function(val, i) { 
 
      textValObj[ i + 1 ] = val; 
 
     }); 
 
     a[$(this).attr('alt')] = textValObj; 
 
    } else { 
 
\t  a[$(this).attr('alt')] = textVal; 
 
    } 
 
}); 
 
console.log(a)

.spacer{height: 3000px; display: block; width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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>

Answer 3

Мы можем только догадываться полные правила разбора от короткого примера, приведенного.

Я ожидаю, что вы хотите что-то вроде этого:

var obj = {}; 
$("span.stats img").each(function() { 
    var nextNode, key, val, text, arr; 
    nextNode = this.nextSibling; 
    if(nextNode.nodeType !== 3) { // test for text node 
     return true; // continue 
    } 
    key = $(this).attr('alt'); 
    text = $.trim(nextNode); 
    arr = text.split(','); 
    if (arr.length < 2) { 
     val = text; 
    } else { 
     val = {}; 
     for(var i=0; i<arr.length; i++) { 
      val[i] = arr[i].replace(':', ''); 
     } 
    } 
    obj[key] = val; 
}); 

Answer 4

Принятый ответ на самом деле не дает вам то, что вы хотите. Вот пример использования vanilla JS, jQuery не нужен, чтобы сделать простой цикл. Это можно использовать, если добавлены дополнительные данные, вам просто нужно будет изменить родительский элемент и разделить данные запятыми.

var parent = document.querySelectorAll('.stats img'); 
var obj = {}; 
for(var i in parent){ 
    var img = parent[i]; 
    var key = img.alt; 
    if(!img.nextSibling) break; 
    var values = img.nextSibling.data.trim().split(','); 
    if(values.length > 1){ 
     obj[key] = {}; 
     for(var c in values){ 
      obj[key][c] = values[c];  
     } 
    } else{ 
     obj[key] = values[0].toString(); 
    } 
} 
console.log(obj)