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

Asked

Viewed 731 times

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 without identification and within these div I have 2 table, the first table has the TITLE OF THE BOX and just that, already the second table has the contents of the box but has a class that can help, but this same class is used in many other places, so it wouldn’t be used as an identifier, which could be used, would be the (TITLE OF THE BOX + class="classeTable"), how could I gather this 2 information to identify exactly what I would like to take the values Football/Volleyball/Basketball?

A 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 several places, so jQuery wouldn’t know for sure which class="classeTable" choose.

Something like that 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 don’t know exactly how to do this and if there’s any way to do it. Maybe there’s some other way that I don’t know.

javascript jquery

  • It doesn’t make much sense. All right, you want to get the quoted texts within a given table that doesn’t have a unique identifier of its own, blz. The question I ask is: why do you want to take the text, for example, "football" from this table? What makes this table special? Then you could answer: "because you have the text 'football' that I want to catch"... Yes, but only this table has this text? If it’s just her, just loop the tables and see which one has the text "football". Simple like this.

  • Just complementing, to select an element, something different from the others it must have, be it a letter that others do not have, a comma, a string.. finally, anything that can differentiate you from other brothers.

1 answer

1


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

First, it is necessary to correct your first table. The correct is <tr><td>TITULO DO BOX</td></tr>.

Done this, 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>
<div class="">
    <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 it as follows:

/* 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>
<div class="">
    <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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.