How to select a specific HTML tag when there is no id or name and (rarely has a class) using jQuery?

Question

How to select a specific HTML tag when there is no id or name and (rarely has a class) using jQuery?

Navigation

#1 by (1 votes)

0

I have the following HTML code:

<div class="">
    <table>
        <tbody>
            <tr>TITULO DO BOX</tr>
        </tbody>
    </table>

    <table class="classeTable">
        <tbody>
            <tr>
                <td>Esporte:</td>
                <td>Futebol</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Volei</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Basquete</td>
            </tr>
        </tbody>
    </table>
<div>

At the moment, I have several div with no ID and within these div I have 2 table , the first table has the BOX TITLE and that's it, already the second table has the contents of the box but it has a class that can help, but that same class is used in several other places, then it could not be used as an identifier, what could be used, would be the

One solution would be:

$(".classeTable > tbody > tr:nth-child(1) > td:nth-child(2)").text();
$(".classeTable > tbody > tr:nth-child(2) > td:nth-child(2)").text();
$(".classeTable > tbody > tr:nth-child(3) > td:nth-child(2)").text();

But as I mentioned earlier, this class="classeTable" is being used in many places, so jQuery would not know for certain which class="classeTable" to choose.

Something like this would be ideal:

$("TITULO DO BOX .classeTable > tbody > tr:nth-child(1) > td:nth-child(2)").text();
$("TITULO DO BOX .classeTable > tbody > tr:nth-child(2) > td:nth-child(2)").text();
$("TITULO DO BOX .classeTable > tbody > tr:nth-child(3) > td:nth-child(2)").text();

But I'm not sure how to do this and if you can do that. Maybe it has some different way that I'm not aware of.

javascript jquery

asked by anonymous 02.03.2018 / 14:02

1 answer

Remove tags from a varchar php variable In pandas and unidecode, how to avoid warning messages - copy of a slice from a DataFrame?

score 1 · Accepted Answer

It is possible, but the way it is, is terribly complicated . That's because <tr>TITULO DO BOX</tr> is invalid. The browser will remove this text and will add it before the table.

Rather, you need to fix your first table. The correct one is <tr><td>TITULO DO BOX</td></tr> .

Done that, let's go to the code (already commented):

/* Captura o elemento "tr" que contém o texto "TITULO DO BOX" */
let trs = $('table tbody tr:contains("TITULO DO BOX")')

          /* Retorna para o elemento pai, o table */
          .parents('table')
          
          /* Captura o próximo elemento da hierarquia */
          .next()
          
          /* Captura todos os elementos "td" que estão na segunda posição */
          .find('tr td:eq(1)');

/* Percorre todos os elementos e exibe o valor na tela. */
$.map( trs, el => {
  console.log( el.innerText )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="">
    <table>
        <tbody>
            <tr><td>TITULO DO BOX</td></tr>
        </tbody>
    </table>

    <table class="classeTable">
        <tbody>
            <tr>
                <td>Esporte:</td>
                <td>Futebol</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Volei</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Basquete</td>
            </tr>
        </tbody>
    </table>
<div>

If you can refactor, you can do the following:

/* Captura o elemento "tr" que contém o texto "TITULO DO BOX" */
let trs = $('table thead th:contains("TITULO DO BOX")')

          /* Retorna para o elemento pai, o table */
          .parents('table')
          
          /* Captura todos os elementos "td" que estão na segunda posição */
          .find('tr td:eq(1)');

/* Percorre todos os elementos e exibe o valor na tela. */
$.map( trs, el => {
  console.log( el.innerText )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="">
    <table class="classeTable">
        <thead>
          <tr colspan="2">
            <th>TITULO DO BOX</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>Esporte:</td>
                <td>Futebol</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Volei</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Basquete</td>
            </tr>
        </tbody>
    </table>
<div>