javascript - 以编程方式将值插入空对象

Question

有没有办法将值压入一个空的对象？我这里有一个显示国家名称和人口的国家列表。我想将这些值插入到一个对象中，就像下面的示例一样。

<ul class="countries">
    <li  class="country">
        <span class="country-name">Philippines</span>
        <span class="country-population">200</span>
        <span class="description">Blablabla</span>
    </li>
    <li class="country">
        <span class="country-name">Brunei</span>
         <span class="country-population">200</span>
         <span class="description">Blablabla</span>
     </li>
     <li class="country">
         <span class="country-name">Malaysia</span>
         <span class="country-population">400</span>
         <span class="country-population">Blablabla</span>
     </li>

</ul>

---

var countries = [
    {name: "Philippines", population: 200, description: "Blablabla"},
    {name: "Brunei", population: 200, description: "Tatatata"},
    {name: "Malaysia", population:4100, description: 'Zzazazaza'}
]

---

0: {name: "Philippines", population: 200, description: "Blablabla"}
1: {name: "Brunei", population: 200, description: "Tatatata"}
2: {name: "Malaysia", population: 400, description: "Zzazazaza"}

我尝试了下面的脚本，但只插入了国家名称。如何同时插入 population 和 description 值？

var countries_new = [];

$('.countries > .country > .country-name').each(function() {
    countries_new.push({
        name: $(this).text()                
    });
}); 

Answer 1

您可以使用find() 获取循环内每个上下文的引用。另请注意 + 前缀，用于将该文本更改为数字类型。您也可以在那里使用 parseInt()。使用 trim() 将有助于删除对象中额外的前导和尾随空格。

var countries = [];
$('.countries .country').each(function(){
  var countryRef = $(this);
  countries.push({
    name: countryRef.find('.country-name').text().trim(),
    population: +(countryRef.find('.country-population').text().trim()),
    description: countryRef.find('.description').text().trim()
  });
});
console.log(countries);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="countries">
  <li class="country">
    <span class="country-name">Philippines</span>
    <span class="country-population">200</span>
    <span class="description">Blablabla</span>
  </li>
  <li class="country">
    <span class="country-name">Brunei</span>
    <span class="country-population">200</span>
    <span class="description">Blablabla</span>
  </li>
  <li class="country">
    <span class="country-name">Malaysia</span>
    <span class="country-population">400</span>
    <span class="country-population">Blablabla</span>
  </li>

</ul>