How to match text to an array with jQuery?

Question

I am trying to match text to an array with a pause between each iteration. Is my if statement and array match incorrect?

var animals = ["turtle", "dolfin"];

setTimeout(function() {

  $("tr").each(function(){
    if($(this).$("td:eq(0)").text().inArray(animals)){
      $(this).$("button").hide();
    }
    else{
    }
  });

}, 5000);

<tr>
  <td>turtle></td>
  <td>lion</td>
  <td><button>correct</button></td>
</tr>

<tr>
  <td>cat></td>
  <td>dog</td>
  <td><button>correct</button></td>
</tr>

I don't see anything in your question that would cause or attempt to cause a pause between iterations. — user400654
– user400654, Commented Jan 31, 2018 at 23:35
I wanted to only use the text in the first cell of each row. — yer rp
– yer rp, Commented Jan 31, 2018 at 23:40
@KevinB I'm with you on the $(this).$("td:eq(0)") in the if statement. But the setTimeout() will cause a 5 second delay between iterations, provided the syntax errors are fixed. — user9263373
– user9263373, Commented Jan 31, 2018 at 23:47
@user9263373 the setTimeout will cause a 5 second delay before any iterations occur, then they'll all happen at once. — user400654
– user400654, Commented Jan 31, 2018 at 23:47

Ele · Accepted Answer · 2018-01-31 23:53:06Z

3

There are some issues with your code:

Your tr is not within a table tag.

<tr>
^

You're using the jQuery symbol in wrong places

if($(this).$("td:eq(0)").text().inArray(animals)){
           ^

$(this).$("button").hide();
        ^

You need to compare the returned value from $.inArray() as follow:

$.inArray() > -1

You have an empty else

 else{
 }
 ^

Look this code snippet with those fixes:

var animals = ["turtle", "dolfin"];

setTimeout(function() {
  $("tr").each(function() {
    var text = $(this).children("td:eq(0)").text();
    if ($.inArray(text, animals) > -1) {
      $("#" + text).hide();
    }
  });
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>turtle</td>
    <td>lion</td>
    <td><button id='turtle'>correct</button></td>
  </tr>

  <tr>
    <td>cat</td>
    <td>dog</td>
    <td><button id='cat'>correct</button></td>
  </tr>
</table>

See? now the code is working well with your logic.

edited Jan 31, 2018 at 23:53

answered Jan 31, 2018 at 23:48

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user9263373 Over a year ago

excellent. However one additional change is needed. As @KevinB pointed out the setTimeout() needs to go inside the $("tr").each() loop to cause the delay between iterations.

Ele Over a year ago

@user9263373 Right, however like I said the code is working well with your logic, so, the OP should modify that :-)

yer rp Over a year ago

Thank you for detailed explanation.

alanfcm · Accepted Answer · 2018-01-31 23:34:04Z

-2

Your if statement should be like this: if($(this).find("td:eq(0)").text().inArray(animals) > -1){

edited Jan 31, 2018 at 23:34

answered Jan 31, 2018 at 23:29

alanfcm

783 bronze badges

7 Comments

Jaromanda X Over a year ago

why should it be like that?

alanfcm Over a year ago

because of what you said

Jaromanda X Over a year ago

I just deleted what I said

Jaromanda X Over a year ago

@KevinB - where?

user400654 Over a year ago

$(this).$ isn't a function.

|

Collectives™ on Stack Overflow

How to match text to an array with jQuery?

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related