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

Question

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

A possible solution is http://stackoverflow.com/questions/376081/how-to-get-a-table-cell-value-using-jquery Use this to find the value of a cell then compare against day and set class for that cell. Putting IDs on elements could make life easier. — Code Whisperer, Oct 16 '14 at 18:00

Ionică Bizău · Accepted Answer · 2014-10-16T19:02:48.013

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');

Hi Ionică, thanks for comment and your logic on using is 100% correct but I do not know it is not working on my demo at here : http://jsfiddle.net/Behseini/0w9rkp49/ — Suffii, Oct 16 '14 at 18:32
@Suffii Good catch, `return` was missing inside of `filter` callback. See [update fidlde](http://jsfiddle.net/0w9rkp49/3/) and updated answer. Thanks for pinging. :-) — Ionică Bizău, Oct 16 '14 at 19:03

score 2 · Answer 2 · answered Oct 16 '14 at 18:00

2

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

answered Oct 16 '14 at 18:00

Banana

7,424
3
22
43

Thanks Banana, but Inoica is right about the last note he added tho his comment, – Suffii Oct 16 '14 at 18:08
yep he absolutely is :) – Banana Oct 16 '14 at 18:09

abbotto · Answer 3 · 2014-10-20T13:29:52.090

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/

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

3 Answers3