I have a website that looks like this:
<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>
I am trying to select each href individually.
I currently have
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} \r\n`)
});
})
The website is https://etherscan.io/token/0x1c410e4c1701f88a2a504f4506251624e8166419, and I keep getting a undefined value.
The problem with your code is that :nth-child selector works in the scope of the parent element. So all your a tags should be inside same tag (have same parent).
.list-inline-item.mr-3 a:nth-child(1) selects first a tag in every individual .list-inline-item.mr3 element. But all of your .list-iline-item.mr3 element contain only one a tag each.
Propobly the best solution in your case would be to give every a tag a unique id and use document.getElementById() or JQuery selector to select them in 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} \r\n`);
})
I don't think :nth-child would find use in this case
Solution 1: with NodeList and 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]
Solution 2: With individual class name to each href with querySelector:
//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")