javascript - 如何使用父函数将类附加到表行？

Question

我想将类 red-border 附加到 tr 元素，该元素包含带有类 warning 的 span >。我的代码不起作用。请帮忙。

$(document).ready(function() {
  $("body").css("width", "2000px");
  $(".jsgrid-table").find(".warning").parents().addClass("red-border");
});

.red-border {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="jsgrid-table">
  <tbody>
    <tr class="jsgrid-row">
      <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td>
    </tr>
  </tbody>
</table>

Answer 1

不允许在 tr 元素中添加 border。另外，使用 .closest() 选择器查找符合条件的父级

$(document).ready(function() {
    $("body").css("width", "2000px");
    $(".jsgrid-table .warning").closest("tr").addClass("red-border");
});

.red-border{
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="jsgrid-table">
	<tbody>
		<tr class="jsgrid-row">
			<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
			<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">
				<span class="warning"></span>
			</td>
		</tr>
		<tr class="jsgrid-row">
			<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
		</td>
	</tr>
</tbody>
</table>

正如在此代码段中，第一个 tr 具有类 warning ，因此类 red-border 以及下一个 tr > 此 tr 的子元素没有 warning 类，并且此 tr 中不存在 red-border元素。