Select the next TD within a Loop

Asked

Viewed 65 times

1

How do I access the next text td within the iteration of loop?

I need to check the next text TD(of the next TR) after the TR current of loop. In the first row of td (administration), ie I want to find the next TD that has the text Administration through the loop but could not with the function next(), someone help me?

    $("tr td:first-child").each(
      function(index) {
	      var texto = $(this).closest("tr td").text();
	      console.log(texto);
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <table>
        <tr>
            <td>administração</td>
            <td>teste1</td>
            <td>teste2</td>
        </tr>
        <tr>
            <td>administração</td>
            <td>teste3</td>
            <td>teste4</td>
        </tr>
        <tr>
            <td>administração</td>
            <td>teste5</td>
            <td>teste6</td>
        </tr>
        <tr>
            <td>Empresas</td>
            <td>teste7</td>
            <td>teste8</td>
        </tr>
        <tr>
            <td>Empresas</td>
            <td>teste9</td>
            <td>teste10</td>
        </tr>
    </table>
    </body>
    </html>

jquery

  • You have to improve this question, it is poorly formulated and difficult to understand.

3 answers

1


If I understand what you want, you can use the this.next to get the next text TD which comes after the first.

Would look like this

$("tr td:first-child").each(function(index) {
    var texto = $(this).closest("tr td").text();
    console.log(texto);
    var textoy = $(this).next("td").text();
    console.log(textoy);
})
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<table>
    <tr>
        <td>administração</td>
        <td>teste1</td>
        <td>teste2</td>
    </tr>
    <tr>
        <td>administração</td>
        <td>teste3</td>
        <td>teste4</td>
    </tr>
    <tr>
        <td>administração</td>
        <td>teste5</td>
        <td>teste6</td>
    </tr>
    <tr>
        <td>Empresas</td>
        <td>teste7</td>
        <td>teste8</td>
    </tr>
    <tr>
        <td>Empresas</td>
        <td>teste9</td>
        <td>teste10</td>
    </tr>
</table>

Edit

I don’t know much about jQuery, but sometimes only with JS can help you too.

This script will take qq TD which has the text "administration" inside, will take the next TD after it, and will take qq TR after TR which has no td=administration

var oi = document.querySelectorAll('td:first-child');

oi.forEach(el => {
    if(el.textContent == 'administração') {
        el.style.color = 'blue';
        // console.log(el);
        el.nextElementSibling.style.color = 'red';
        // console.log(el.nextElementSibling);
    } else if (el.parentElement) {
        el.parentElement.style.color = 'green';
        console.log(el.parentElement)
    }
});
<table>
    <tr>
        <td>administração</td>
        <td>teste1</td>
        <td>teste2</td>
    </tr>
    <tr>
        <td>outro nome</td>
        <td>teste1</td>
        <td>teste2</td>
    </tr>
    <tr>
        <td>administração</td>
        <td>teste3</td>
        <td>teste4</td>
    </tr>
    <tr>
        <td>outro nome</td>
        <td>teste1</td>
        <td>teste2</td>
    </tr>
    <tr>
        <td>outro nome</td>
        <td>teste1</td>
        <td>teste2</td>
    </tr>
    <tr>
        <td>administração</td>
        <td>teste3</td>
        <td>teste4</td>
    </tr>
    <tr>
        <td>administração</td>
        <td>teste3</td>
        <td>teste4</td>
    </tr>
    <tr>
        <td>outro nome</td>
        <td>teste1</td>
        <td>teste2</td>
    </tr>
</table>

  • but I don’t want to take the text of the next TD that is on her side, I want to take the Text of the next TD of the other TR, which has the same text as the TD of the previous TR

  • @Demetriusfernandes sorry friend, but I could not understand what you want

  • I want to take the next TD that has the Text equal to "administration", but do it through the loop, checking of one in which is the next one that has the administration text, understood ?

  • @Demetriusfernandes take a look at the Code see if that’s what you needed

  • 1

    thank you very much friend, helped me very ein, saved my job kkk

  • @Demetriusfernandes hahaha good that you helped there, I’m happy for you! And not to pass But again I suggest you do one of these courses online, even if it is some free on Youtube, there is good material for beginner and for free! Success

  • I’m not beginner not kkkk I’ve been playing with programming for a long time, only I was too fixated on jquery to solve the problem and I forgot that in pure javascript could be easier kkkkk

  • @Demetriusfernandes already I am beginner in JS and have given a lot of preference to pure JS, my examples are still a little "rude", I do not know how to refine the code, but it is very simple to read I believe rss

Show 3 more comments

0

I don’t quite understand, but I did it to help you.

<script>
    $("tr td:first-child").each(
      function(index) {
          var texto = $(this).closest("tr td").text();
          if(texto == "administração"){
            var td_administracao = $(this);
            console.log(texto);
          }
    })
</script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        </head>
        <body>
        <table>
            <tr>
                <td>administração</td>
                <td>teste1</td>
                <td>teste2</td>
            </tr>
            <tr>
                <td>administração</td>
                <td>teste3</td>
                <td>teste4</td>
            </tr>
            <tr>
                <td>administração</td>
                <td>teste5</td>
                <td>teste6</td>
            </tr>
            <tr>
                <td>Empresas</td>
                <td>teste7</td>
                <td>teste8</td>
            </tr>
            <tr>
                <td>Empresas</td>
                <td>teste9</td>
                <td>teste10</td>
            </tr>
        </table>
        </body>
        </html>

-1

I don’t know if that’s exactly it, but here you can iterate on the text of all the tds.

$.each($('td'), function(k, v){
  if($(v).text() == 'administração'){
    $(this).css('color','blue');
  }
})

Browser other questions tagged jquery

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