Question

我正在尝试转换类似HTML代码段的内容：

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

包含名称和图片网址的JavaScript对象。我怎么能这样做？

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>

更新： 如果您要生成一个对象，该对象的密钥为span文本，且值为src属性，请使用 {{3} 方法并迭代元素并生成对象。

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

＆＃13;

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));
}

＆＃13;

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

＆＃13;

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>

将HTML元素列表转换为对象的Javascript列表

4 个答案: