使用 JS 循环以从 Chrome 控制台上的 HTML 列表中获取信息

Question

我正在尝试在 Google Chrome 控制台上使用 Javascript 从站点获取财产交易数据。

到目前为止，我已经弄清楚如何使用以下代码获取第一个属性的属性对象中的信息：

var property = [{}]

property[0]['Name']  = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard-titles > a").innerText;

property[0]['City-State-Zip'] = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard-titles > h2").innerText;

property[0]['Price'] = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard--priceGrid-sm > div").innerText;

property[0]['Beds'] = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard-subStats.checkable-undefined > div.uc-listingCard-subStat.uc-listingCard-subStat--beds").innerText;

property[0]['Baths'] = document.querySelector("#closed-deals-container > section > div > div.profile-recent-transactions.profile-recent-transactions--paginated > div:nth-child(1) > div > div.uc-listingCard-body > div.uc-listingCard-content > div > div.uc-listingCard-subStats.checkable-undefined > div.uc-listingCard-subStat.uc-listingCard-subStat--baths").innerText;

列表上还有 26 个其他属性，我想遍历所有这些属性并将它们放入属性对象中。 我想我需要做一个 for 循环，但我无法弄清楚如何执行它。

Answer 1

您可以通过 JSON.stringify() 使用 console.log 例如：

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

和你的代码：

console.log(JSON.stringify(property))

Answer 2

您可以使用 jQuery 编写类似的内容。

const list = [];

jQuery('div.uc-listingCard-content').each(function () {
    const $this = jQuery(this);

    list.push({
        'Name': $this.find('.uc-listingCard-titles > a').text().trim(),
        'City-State-Zip': $this.find('.uc-listingCard-titles > h2').text().trim(),
        'Price': $this.find('.uc-listingCard--priceGrid-sm > div').text().trim(),
        'Beds': $this.find('.uc-listingCard-subStat--beds').text().trim(),
        'Baths': $this.find('.uc-listingCard-subStat--baths').text().trim(),
    });

});

console.log(list);