Selection Elements

Question

Selection Elements

Navigation

#1 by (4 votes)
#2 by (0 votes)

2

I have the following structure below HTML, I would like to know, as I do when I click the button, I can get value from the element of td class="description" before that within the scope of tr.

<tr>
    <td class="descricao">Texto01</td>
    <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
</tr>
<tr>
    <td class="descricao">Texto02</td>
    <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
</tr>
<tr>
    <td class="descricao">Texto02</td>
    <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
</tr>

html jquery

asked by anonymous 29.11.2018 / 14:34

2 answers

overlapping divs, but leaving a top not overlapped Activating virtualenv in Makefile

score 4 · Answer 1

You will use:

jQuery.closest() to select the tr closest to the button in the DOM tree
jQuery.find() to select td.descricao
jQuery.text() to get content from td.descricao

Example:

$('[type=button]').on('click', function() {
    let descricao = $(this).closest('tr').find('.descricao').text();
    console.log(descricao);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><table><tr><tdclass="descricao">Texto01</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
    <tr>
        <td class="descricao">Texto02</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
    <tr>
        <td class="descricao">Texto03</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
</table>

score 0 · Answer 2

    $('button').on('click', function() {
        el = $(this).closest('tr').children('td.descricao');
        el.css('background-color', 'lightgreen');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table><tr><tdclass="descricao">Texto01</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
    <tr>
        <td class="descricao">Texto02</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
    <tr>
        <td class="descricao">Texto03</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
</table>