通过元素的内容和其祖先的内容来定位元素答案

【问题标题】：targeting an element by its content and the content of its ancestors通过元素的内容和其祖先的内容来定位元素
【发布时间】：2026-01-07 07:55:02
【问题描述】：

您能否看一下This Demo，让我知道如何将.today 类添加到<td>，其值为day，而父级的值为month。

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

我已经尝试过使用.find() 作为：

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

但这只是将月份添加到所有thead tr

【问题讨论】：

一个可能的解决方案是*.com/questions/376081/… 使用它来查找单元格的值，然后与日期进行比较并为该单元格设置类。将 ID 放在元素上可以让生活更轻松。
对于单行解决方案，请查看我的答案

标签： javascript jquery

【解决方案1】：

像这样：

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

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

Live Example

【讨论】：

谢谢 Banana，但 Inoica 对他在评论中添加的最后一个注释是正确的，
是的，他绝对是:)

【解决方案2】：

这样使用:contains：

$("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>

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

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

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

【讨论】：

嗨 Ionică，感谢您的评论，您的使用逻辑是 100% 正确的，但我不知道它不适用于我的演示：jsfiddle.net/Behseini/0w9rkp49
@Suffii 很好，return 在 filter 回调中丢失。请参阅update fidlde 和更新的答案。感谢您的 ping。 :-)

【解决方案3】：

在这种情况下，您必须使用“:contains()”和“filter()”选择器。

使用“filter()”可以让您显式检查字符串以查看它是否与您的搜索词完全相同，而不是允许返回包含搜索词的所有字符串。

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

此函数将查找包含“month”值的表，然后它将查询该表以查找明确包含该值的“td”选择器的“day”，因此它可以添加“today”类。

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

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

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

【讨论】：