CODEWITHSUNDEEP
jqueryarraysloops
pv619
pv619

Reputation: 409

how to find array values inside an element and add jquery class to it

I am trying to find array values inside an element and then add a css class to it. Is my technique wrong? Can someone please help me.

var numbers = [1, 2, 3, 7, 8, 9, 10, 16, 17, 18, 19, 20];
for (numbers < 1; numbers <= 20; numbers++) {
  $('td').find(numbers).addClass('active');
}
td.active {
  color: #f00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1
      <td>
        <td>2
          <td>
            <td>3
              <td>
                <td>4
                  <td>
                    <td>5
                      <td>
                        <td>6
                          <td>
                            <td>7
                              <td>
                                <td>8
                                  <td>
                                    <td>9
                                      <td>
                                        <td>10
                                          <td>
                                            <tr/>
                                            <tr>
                                              <td>11
                                                <td>
                                                  <td>12
                                                    <td>
                                                      <td>13
                                                        <td>
                                                          <td>14
                                                            <td>
                                                              <td>15
                                                                <td>
                                                                  <td>16
                                                                    <td>
                                                                      <td>17
                                                                        <td>
                                                                          <td>18
                                                                            <td>
                                                                              <td>19
                                                                                <td>
                                                                                  <td>20
                                                                                    <td>
                                                                                      <tr/>
</table>

Thanks in advance.

Upvotes: 1

Views: 416

Answers (3)

Luke
Luke

Reputation: 19941

If you like tiny, reusable functions like I do, here's how I would do it:

const activeNumbers = [1, 2, 3, 7, 8, 9, 10, 16, 17, 18, 19, 20];

function getNumberText($elt) {
    return parseInt($elt.text(), 10);
}

function isActiveNumber(n) {
    return activeNumbers.includes(n);
}

function updateActiveClass(elt) {
    const $elt = $(elt);
    const n = getNumberText($elt);
    $elt.toggleClass('active', isActiveNumber(n));
}

function highlightActiveCells(selector) {
    $(selector).find('td').each(function () { updateActiveClass(this); });
}

highlightActiveCells('table'); // or a better selector, like a class or id

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

There's several issues here. Firstly your HTML is broken. The td elements needs to be closed properly with </td>. Then the <tr /> need to be </tr>.

Secondly your for loop syntax is incorrect. numbers is a reference to the array, so using it as the iterator is going to cause odd behaviour. You instead need to define an integer and increment that. Then you can use that integer to retrieve values from numbers by index within the for loop.

Finally, find() is expecting a selector to search for child elements within the td. Instead you need to use filter() to match the text of each cell. The filter function needs to take the text of the cell and use indexOf() to determine if that value is within the array contents. Also note that when using this method you no longer need the for loop at all. Try this:

var numbers = [1, 2, 3, 7, 8, 9, 10, 16, 17, 18, 19, 20];
$('td').filter(function() {
  return numbers.indexOf(parseInt($(this).text(), 10)) != -1;
}).addClass('active');
td.active {
  color: #f00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
</table>

Upvotes: 4

MightyMike
MightyMike

Reputation: 64

As Rory said, make sure you close all elements correctly.

Try out this code. It filters out all elements with the specified numbers as inner html and sets the css class.

var numbers = [1, 2, 3, 7, 8, 9, 10, 16, 17, 18, 19, 20];
for (var i = 0; i < numbers.length; i++) {
  $('td').filter(function() { 
    return $(this).html() == numbers[i];
  }).addClass('active');
}

As you can see, you must iterate the array to get the specified values.

Upvotes: 1

Related Questions