CODEWITHSUNDEEP
javascriptjquerycss
Romeu Fernandes Bessa
Romeu Fernandes Bessa

Reputation: 85

Get the element inside a div without class and id

I have a pagination div, where I have an html that I can't configure to add classes or id. I have to work with what I have.

I have a problem that when the page is selected it loses the <a href="#"> </a>. Automatically the page numbering is as text: "1" or it could also be "2", I would like to know a way by css or javascript that I could get this element "1" or "2" or "3" ... and customize it.

Here is the code:

<nav class="bs__pagination" aria-label="Paginação">
<i class="icon-seta-esquerda-b icon" aria-hidden="true"></i>
  "1"
<a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GNJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a página 2" id="pc1617030662888_linkToPage_2">2</a>
<a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GOJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a página 3" id="pc1617030662888_linkToPage_3">3</a>
<a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GPJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a próxima página" id="pc1617030662888_nextPage"><i class="icon-seta-direita-b icon" aria-hidden="true"></i></a>
</nav>

Can someone help me?

Upvotes: 1

Views: 2139

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337656

Assuming that the active page is always stored in the only node within the parent to have content within it, then you can use find() to retrieve it, and textContent to get the text within it. Try this:

let nodes = [...document.querySelector('nav.bs__pagination').childNodes];
let textNode = nodes.find(node => node.nodeType === 3 && node.textContent.trim().length > 0);
let pageNumber = textNode.textContent.trim();
console.log(pageNumber);
<nav class="bs__pagination" aria-label="Paginação">
  <i class="icon-seta-esquerda-b icon" aria-hidden="true"></i> "1"
  <a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GNJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a página 2" id="pc1617030662888_linkToPage_2">2</a>
  <a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GOJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a página 3" id="pc1617030662888_linkToPage_3">3</a>
  <a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GPJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a próxima página" id="pc1617030662888_nextPage"><i class="icon-seta-direita-b icon" aria-hidden="true"></i></a>
</nav>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075209

If it's the only one on the page, you can use the CSS selector .bs__pagination i with querySelector to select the i element immediately before it, and use its nextSibling property to get the text node following it, and use its nodeValue to get the string (perhaps with trim() to remove the whitespace):

console.log(
    document.querySelector(".bs__pagination i")
        .nextSibling
            .nodeValue.trim()
);
<nav class="bs__pagination" aria-label="Paginação">
<i class="icon-seta-esquerda-b icon" aria-hidden="true"></i>
  "1"
<a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GNJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a página 2" id="pc1617030662888_linkToPage_2">2</a>
<a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GOJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a página 3" id="pc1617030662888_linkToPage_3">3</a>
<a href="p0/IZ7_819E19820H3TB0Q3I25JK808F2=CZ6_819E19820H3TB0Q3I25JK800I3=MKJTMIKw=GPJ=/#Z7_819E19820H3TB0Q3I25JK808F2" title="Link para a próxima página" id="pc1617030662888_nextPage"><i class="icon-seta-direita-b icon" aria-hidden="true"></i></a>
</nav>

Upvotes: 0

Related Questions