CODEWITHSUNDEEP
javascriptjquery
Suffii
Suffii

Reputation: 5784

targeting an element by its content and the content of its ancestors

Can you please take a look at This Demo and let me know how I can add the .today class to the <td> which has value of day and the parent has value of the month.

var month = "October";
var day = 16;

I already tried with .find() as:

$("thead tr").find("th").html(month).addClass('today');

but this just adding the month to all of the thead tr

Upvotes: 2

Views: 55

Answers (3)

abbotto
abbotto

Reputation: 4339

In this case, you have to use the ":contains()" and "filter()" selectors.

Using "filter()" will let you explicitly check a string to see if it is exactly the same as your search term as opposed to allowing all strings that contain the search term to be returned.

$("table:contains(" + month + ")").find("td").filter(function () {
    return $(this).text() === day.toString()
}).addClass('today');

This function will look for a table that contains the value of "month", then it will query that table for a "td" selector that explicitly contains the value of "day" so it can add the class "today" to it.

Example: http://jsfiddle.net/o0110o/cygzgfzj/2/

Reference: http://api.jquery.com/contains-selector/

Reference: http://api.jquery.com/filter/

Upvotes: -1

Ionică Bizău
Ionică Bizău

Reputation: 113455

Use :contains this way:

$("table:contains(" + month + ")")
   .find("td:contains(" + day + ")")
   .addClass('today');


var month = "October";
var day = 16;

$("table:contains(" + month + ")").find("td:contains(" + day + ")").addClass('today');
table {
  background: grey;
}
.today {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:50%">
  <thead>
    <tr>
      <th colspan="4">Feburary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>15</td>
      <td>17</td>
      <td>16</td>
      <td>18</td>
    </tr>
  </tbody>
</table>
<br />
<table style="width:50%">
  <thead>
    <tr>
      <th colspan="4">October</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>15</td>
      <td>17</td>
      <td>16</td>
      <td>18</td>
    </tr>
  </tbody>
</table>
<br />
<table style="width:50%">
  <thead>
    <tr>
      <th colspan="4">March</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>15</td>
      <td>17</td>
      <td>16</td>
      <td>18</td>
    </tr>
  </tbody>
</table>
<br />
<table style="width:50%">
  <thead>
    <tr>
      <th colspan="4">May</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>15</td>
      <td>17</td>
      <td>16</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

Note that :contains searches for all elements that contain the searched string. So, searching for 1, will highlight 15, 16, 17, 18.

You can fix this by using filter() method:

$("table:contains(" + month + ")")
   .find("td").filter(function () {
       return $(this).text() === day.toString()
   })
   .addClass('today');

Upvotes: 3

Banana
Banana

Reputation: 7473

Like This:

$("th:contains("+month+")").parents("table").find("td:contains("+day+")").addClass("today");

we find the <th> that contains the month, get the table it belongs to, and then search for the <td> that contains the date.

Live Example

Upvotes: 2

Related Questions