代码之家 › 专栏 › 技术社区 › clestcruz

以编程方式将值推入空对象

jquery javascript

clestcruz · 技术社区 · 7 年前

有没有办法把值推到一个空的 object

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

6 回复 | 直到 7 年前

Nikhil Aggarwal 7 年前

环游世界 .country 而不是元素 find 其中的元素每个 .国家 population 数 text() ,使用 Number() 转换它。

var countries_new = [];

$('.countries > .country').each(function() {
    countries_new.push({
        name: $(this).find(".country-name").text(),
        population: Number($(this).find(".country-population").text()),
        description: $(this).find(".description").text()
    });
});

console.log(countries_new);

<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="description">Blablabla</span>
        </li>

    </ul>

Ankit Agarwal 7 年前

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>

HMR 7 年前

您不需要jQuery,只需选择所有国家,然后从该元素中选择所需的值:

console.log(
  [...document.querySelectorAll('.countries>.country')].map(
    (el) => ({
      name: el.querySelector('.country-name').innerText.trim(),
      population: el.querySelector('.country-population')
        .innerText.trim(),
      description: el.querySelector('.description')
        .innerText.trim(),
    }),
  ),
);

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

</ul>

connexo 7 年前

span 元素有以 country-

const countries = document.querySelectorAll('.country');

const result = [];

for (const country of countries) {
  let resEl = {};
  [...country.querySelectorAll('span[class^="country-"]')].forEach((span) => resEl[span.className.split('-')[1]] = span.innerText)
  result.push(resEl);
}

console.log(result)

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

brk 7 年前

你真的不推吗 值转换为空对象 ,则更希望创建一个对象并将该对象推入数组中。所以基本上你可以使用array-map方法返回一个数组。

document.querySelectorAll [...] 正在使用扩展语法将活动集合转换为数组,以便可以使用数组方法。这里map是一个数组方法。在这个方法中创建一个对象并返回

let k = [...document.querySelectorAll('.country')].map(function(curr) {
  return {
    name: curr.querySelector('.country-name').textContent.trim(),
    population: curr.querySelector('.country-population').textContent.trim(),
    description: curr.querySelector('.description').textContent.trim()

  }
})

console.log(k)

<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="description">Blablabla</span>
  </li>

</ul>

-1

Negi Rox 7 年前

"use strict";
function _toConsumableArray(a) {
  if (Array.isArray(a)) {
    for (var b = 0, c = Array(a.length); b < a.length; b++) c[b] = a[b];
    return c;
  }
  return Array.from(a);
}
var results = []
  .concat(_toConsumableArray(document.querySelectorAll(".countries>.country")))
  .map(function(a) {
    return {
      name: a.querySelector(".country-name").innerText.trim(),
      population: a.querySelector(".country-population").innerText.trim(),
      description: a.querySelector(".description").innerText.trim()
    };
  });
console.log(results);