通过内容及其祖先的内容来定位元素

Question

请您查看This Demo并告诉我如何将.today课程添加到<td>，其中day的值为month var month = "October"; var day = 16; 的价值。

.find()

我已尝试使用$("thead tr").find("th").html(month).addClass('today'); 作为：

thead tr

但这只是将月份添加到所有{{1}}

Answer 1

以这种方式使用:contains：

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

---

＆＃13;

＆＃13;

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

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

＆＃13;

table {
  background: grey;
}
.today {
  background: yellow;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请注意，:contains会搜索包含搜索字符串的所有元素。因此，搜索1会突出显示15，16，17，18。

您可以使用filter()方法解决此问题：

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

Answer 2

喜欢这个：

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

我们找到包含月份的<th>，获取它所属的表格，然后搜索包含该日期的<td>。

的 Live Example

Answer 3

在这种情况下，您必须使用＆＃34; ：contains（）＆＃34;和＆＃34; 过滤（）＆＃34;选择器。

使用＆＃34; 过滤器（）＆＃34;将允许您显式检查字符串以查看它是否与搜索词完全相同，而不是允许返回包含搜索词的所有字符串。

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

此功能将查找包含＆＃34; 月＆＃34;的值的表格，然后它将在该表格中查询＆＃34; td ＆＃34;明确包含＆＃34; 天＆＃34;的值的选择器所以它可以添加课程＆＃34;今天＆＃34;它。

示例： http://jsfiddle.net/o0110o/cygzgfzj/2/

参考： http://api.jquery.com/contains-selector/

参考： http://api.jquery.com/filter/