список Преобразование из HTML-элемента в список Javascript объекта

Question

Я пытаюсь преобразовать что-то вроде этого HTML фрагмент:

<ul> 
    <li><span>Frank</span><img src="pic.jpg"></li> 
    <li><span>Steve</span><img src="pic2.jpg"></li> 
</ul> 

в объекты JavaScript, которые содержат имя и URL изображения. Как я могу это сделать?

Answer 1

Использование map() метод

var res = $('ul li').map(function() { // select all li and iterate 
 
    // return as required format of array elemnt 
 
    return { 
 
    name: $('span', this).text(), // get text in span 
 
    src: $('img', this).attr('src') // get src attribute 
 
    } 
 
}).get(); // get array from jquery object 
 

 
console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><span>Frank</span> 
 
    <img src="pic.jpg"> 
 
    </li> 
 
    <li><span>Steve</span> 
 
    <img src="pic2.jpg"> 
 
    </li> 
 
</ul>

---

UPDATE: Если вы хотите создать объект, который имеет ключ в виде текста диапазона и значение, как src атрибут, то использование each() метод и перебрать элементы и сгенерировать объект.

var res = {}; 
 
$('ul li').each(function() { // select all li and iterate 
 
    res[$('span', this).text().trim()] = $('img', this).attr('src'); 
 
}) 
 

 
console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><span>Frank</span> 
 
    <img src="pic.jpg"> 
 
    </li> 
 
    <li><span>Steve</span> 
 
    <img src="pic2.jpg"> 
 
    </li> 
 
</ul>

Answer 2

var objs = document.querySelectorAll('.to-js-obj li'); 
 
var objs_arr = []; 
 

 
if (objs) { 
 
    
 
    for (var i = 0; i < objs.length; i++) { 
 
     var name = objs[i].querySelector('span').innerText; 
 
     var url = objs[i].querySelector('img').src; 
 
     
 
     objs_arr.push({ 
 
      name: name, 
 
      src: url 
 
     }); 
 
     
 
    } 
 
    console.log(JSON.stringify(objs_arr)); 
 
}

<ul class="to-js-obj"> 
 
    <li><span>Frank</span> 
 
    <img src="pic.jpg"> 
 
    </li> 
 
    <li><span>Steve</span> 
 
    <img src="pic2.jpg"> 
 
    </li> 
 
</ul>

Answer 3

Использование JQuery

var $list = $('ul'), // get the list (ideally, add an ID) 
$listItems = $list.find('li'); // find list items 

if($listItems.length > 0) { // if list items exist 
    var images = []; // create empty array to store objects 
    $.each($listItems, function(index) { // loop through the list items 

     var $item = $($listItems[index]); // save item as jQuery element 
     var name = $item.find('span').text(); // Get name from span 
     var imageSrc = $item.find('img').attr('src'); // Get img src 
     images[index] = {}; // Create new object in array 
     images[index].name = name; // Add name 
     images[index].imageSrc = imageSrc; // Add source 
    }); 

} 

Возвращает

[Object { imageSrc: "pic.jpg", name: "Frank" }, Object { imageSrc: "pic2.jpg", name: "Steve" }]

Answer 4

Вы можете использовать это:

var image_pairs = []; 
 

 
$("ul li").each(function() { 
 
    image_pairs.push({ 
 
    name: $(this).find("span").text(), 
 
    url: $(this).find("img").attr("src") 
 
    }); 
 
}); 
 

 
console.log(image_pairs);

<ul> 
 
    <li><span>Frank</span><img src="pic.jpg"></li> 
 
    <li><span>Steve</span><img src="pic2.jpg"></li> 
 
</ul> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>