我有一个网站，看起来像这样:
<div class="col-md-8">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a class="link-hover-secondary" data-placement="top" data-toggle="tooltip" data-original-title="Twitter: https://www.twitter.com/EY3K0N" rel="nofollow" target="_blank" href="https://www.twitter.com/EY3K0N"><span class="fab fa-twitter"></span></a></li>
<li class="list-inline-item mr-3">
<a class="link-hover-secondary" data-placement="top" data-toggle="tooltip" data-original-title="Discord: https://discord.gg/ey3k0n" rel="nofollow" target="_blank" href="https://discord.gg/ey3k0n"><span class="fab fa-discord"></span></a></li>
<li class="list-inline-item mr-3">
<a class="link-hover-secondary" data-placement="top" data-toggle="tooltip" data-original-title="Opensea: https://opensea.io/collection/ey3k0n-first-edition" rel="nofollow" target="_blank" href="https://opensea.io/collection/ey3k0n-first-edition/"><img id="opensea_logo" src="/images/opensea.svg" class="mt-n3px" width="15"></a></li>
</ul>
</div>
我正在尝试单独选择每个href。
我现在有
axios.get("https://etherscan.io/token/0x1c410e4c1701f88a2a504f4506251624e8166419").then(res => {
const $ = cheerio.load(res.data);
$('ul.list-inline.mb-0').each((i, ul) => {
const children = $(ul).children();
const selectedAnchors = $(ul).find("li.list-inline-item.mr-3");
const twitter = $(".list-inline-item.mr-3 a:nth-child(1)").attr('href')
const discord = $(".list-inline-item.mr-3 a:nth-child(2)").attr('href')
const opensea = $(".list-inline-item.mr-3 a:nth-child(3)").attr('href')
writeStream.write(`${twitter}, ${discord}, ${opensea} rn`)
});
})
网站是https://etherscan.io/token/0x1c410e4c1701f88a2a504f4506251624e8166419，我一直得到一个未定义的值
代码的问题是:nth-child选择器在父元素的范围内工作。所以你所有的a标签应该在同一个标签内(有相同的父)。
.list-inline-item.mr-3 a:nth-child(1)在每个.list-inline-item.mr3元素中选择第一个a标签。但是所有的.list-iline-item.mr3元素只包含一个a标签。
也许在你的情况下，最好的解决方案是给每个a标签一个唯一的id，并使用document.getElementById()或JQuery选择器在javascript中选择它们。
<div class="col-md-8">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a id="twitter" class="link-hover-secondary" data-placement="top" data-toggle="tooltip" data-original-title="Twitter: https://www.twitter.com/EY3K0N" rel="nofollow" target="_blank" href="https://www.twitter.com/EY3K0N"><span class="fab fa-twitter"></span></a>
</li>
<li class="list-inline-item mr-3">
<a id="discord" class="link-hover-secondary" data-placement="top" data-toggle="tooltip" data-original-title="Discord: https://discord.gg/ey3k0n" rel="nofollow" target="_blank" href="https://discord.gg/ey3k0n"><span class="fab fa-discord"></span></a>
</li>
<li class="list-inline-item mr-3">
<a id="opensea" class="link-hover-secondary" data-placement="top" data-toggle="tooltip" data-original-title="Opensea: https://opensea.io/collection/ey3k0n-first-edition" rel="nofollow" target="_blank" href="https://opensea.io/collection/ey3k0n-first-edition/"><img id="opensea_logo" src="/images/opensea.svg" class="mt-n3px" width="15"></a>
</li>
</ul>
</div>
axios.get("https://etherscan.io/token/0x1c410e4c1701f88a2a504f4506251624e8166419").then(res => {
const $ = cheerio.load(res.data);
const twitter = $("#twitter").attr('href');
const discord = $("#discord").attr('href');
const opensea = $("#opensea").attr('href');
writeStream.write(`${twitter}, ${discord}, ${opensea} rn`);
})
我不认为:n -child会在这种情况下使用
解决方案1:与NodeList和document.querySelectorAll:
const hrefs = document.querySelectorAll("a")
//OR
const hrefs = document.querySelectorAll(".link-hover-secondary")
//This method returns Node list - you get access to each element with array notation
const hrefOne = hrefs[0]
const hrefTwo = hrefs[1]
const hrefThree = hrefs[2]
解决方案2:使用querySelector:
为每个href指定单独的类名//Instead of this:
<a class="link-hover-secondary"></a>
<a class="link-hover-secondary"></a>
<a class="link-hover-secondary"></a>
//You could rename anchor tags with individual classes (you can name them customly -it's an example)
<a class="link-hover-secondary href-one"></a>
<a class="link-hover-secondary href-two"></a>
<a class="link-hover-secondary href-three"></a>
//And then access them with querySelector
const hrefOne = document.querySelector(".href-one")
const hrefTwo = document.querySelector(".href-two")
const hrefThree = document.querySelector(".href-three")