I have a website that looks like this:

<div >
   <ul >
      <li >
        <a  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 ></span></a></li>
      <li >
        <a  data-placement="top" data-toggle="tooltip" data-original-title="Discord: https://discord.gg/ey3k0n" rel="nofollow" target="_blank" href="https://discord.gg/ey3k0n"><span ></span></a></li>
      <li >
        <a  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"  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.

CodePudding user response：

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 >
   <ul >
      <li >
        <a id="twitter"  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 ></span></a>
      </li>
      <li >
        <a id="discord"  data-placement="top" data-toggle="tooltip" data-original-title="Discord: https://discord.gg/ey3k0n" rel="nofollow" target="_blank" href="https://discord.gg/ey3k0n"><span ></span></a>
      </li>
      <li >
        <a id="opensea"  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"  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`);
})

CodePudding user response：

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 ></a>
<a ></a>
<a ></a>


//You could rename anchor tags with individual classes (you can name them customly -it's an example)
<a ></a>
<a ></a>
<a ></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")