Tengo un sitio web que se ve así:
<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>Estoy tratando de seleccionar cada href individualmente.
actualmente tengo
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`) }); })El sitio web es https://etherscan.io/token/0x1c410e4c1701f88a2a504f4506251624e8166419 y sigo obteniendo un valor indefinido.
El problema con su código es que :nth-child selector funciona en el ámbito del elemento principal. Entonces a todas sus etiquetas deben estar dentro de la misma etiqueta (tener el mismo padre).
.list-inline-item.mr-3 a:nth-child(1) selecciona primero a etiqueta en cada elemento .list-inline-item.mr3 . Pero todos sus .list-iline-item.mr3 contienen solo a etiqueta cada uno.
Probablemente, la mejor solución en su caso sería darle a cada etiqueta a identificación única y usar document.getElementById() o el selector JQuery para seleccionarlos en 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`); })No creo que :nth-child encuentre uso en este caso
Solución 1 : con NodeList y 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]Solución 2 : con un nombre de clase individual para cada href con 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")