How to select hrefs individually with :nth-child?

Question

I have a website that looks like this:

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

The website is https://etherscan.io/token/0x1c410e4c1701f88a2a504f4506251624e8166419, and I keep getting a undefined value.

user_19332270 · Answer

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.

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

user_16455776 · Answer

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:





//You could rename anchor tags with individual classes (you can name them customly -it's an example)




//And then access them with querySelector
const hrefOne = document.querySelector(".href-one")
const hrefTwo = document.querySelector(".href-two")
const hrefThree = document.querySelector(".href-three")

How to select hrefs individually with :nth-child?

2 Answers