[英]Convert list of HTML element into Javascript list of object
I'm trying to convert something like this HTML snippet: 我正在尝试转换如下HTML片段:
<ul>
<li><span>Frank</span><img src="pic.jpg"></li>
<li><span>Steve</span><img src="pic2.jpg"></li>
</ul>
into a JavaScript objects that contain the name and the image's url. 包含名称和图片网址的JavaScript对象。 How can I do that? 我怎样才能做到这一点?
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 : If you want to generate an object which has key as span text and value as src
attribute then use each()
method and iterate over elements and generate object. 更新:如果要生成一个对象,该对象的键为跨度文本,值作为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>
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>
Using jQuery 使用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
});
}
Returns 退货
[Object { imageSrc: "pic.jpg", name: "Frank" }, Object { imageSrc: "pic2.jpg", name: "Steve" }]
You can use this: 您可以使用此:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.