获取最右边的输入：使用单个 jQuery(Sizzle) 选择器检查每个 tr

Question

我不知道这是否可能，但这是我今天在项目中遇到的一个有趣的情况。

复选框表。一种类型的复选框是分层的，这意味着如果选中一个，则它左侧的所有相同类型的复选框也会被神奇地选中。

我们只需要发送有关最右侧选中复选框的信息。 下面是一个使用 jQuery 代码来完成它的示例： https://codepen.io/oriadam/pen/Yapodm

$("input").click(function() {
	$(".here").removeClass("here");
	$("tr").each(function(i, tr) {
		$(tr)
			.find(".a:has(input:checked):last input:checked")
			.each(function(i, elem) {
				$(elem).parent().addClass("here");
			});
	});
});

.here {
	background: red;
}
.a input {
	width: 2em;
	height: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox"></td>
		<td class="a"><input type="checkbox"></td>
		<td><input type="checkbox" checked></td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox"></td>
		<td><input type="checkbox" checked></td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td><input type="checkbox" checked></td>
	</tr>
</table>

<br><br> The challange: <br> Use a single jQuery(Sizzle) selector to get the rightmost checked checkbox of every tr, while considering only td that has class a.

有没有办法使用单个 jQuery(Sizzle) 选择器来获取每个 tr 的最右侧选中复选框，同时只考虑 a 类的 td。

Answer 1

您可以使用过滤器：

$("input").click(function() {
  $(".here").removeClass("here");

  $('.a:has(input:checked)').filter(function() {             // get all .a that have inputs checked in them
    return !$(this).nextAll('.a:has(input:checked)').length; // only return .a that has no following siblings with an input checked in them
  }).addClass("here");
});

.here {
  background: red;
}

.a input {
  width: 2em;
  height: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td><input type="checkbox"></td>
    <td class="a here"><input type="checkbox" checked></td>
    <td class="a"><input type="checkbox"></td>
    <td class="a"><input type="checkbox"></td>
    <td><input type="checkbox" checked></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td class="a"><input type="checkbox" checked></td>
    <td class="a here"><input type="checkbox" checked></td>
    <td class="a"><input type="checkbox"></td>
    <td><input type="checkbox" checked></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td class="a"><input type="checkbox" checked></td>
    <td class="a"><input type="checkbox" checked></td>
    <td class="a here"><input type="checkbox" checked></td>
    <td><input type="checkbox" checked></td>
  </tr>
</table>

<br><br> The challange: <br> Use a single jQuery(Sizzle) selector to get the rightmost checked checkbox of every tr, while considering only td that has class a.

Answer 2

您当然可以简化该代码：

$("tr").each(function(i, tr) {
    $(tr).find(".a:has(input:checked):last").addClass("here");
});

$("input").click(function() {
	$(".here").removeClass("here");
	$("tr").each(function(i, tr) {
		$(tr).find(".a:has(input:checked):last").addClass("here");
	});
});

.here {
	background: red;
}
.a input {
	width: 2em;
	height: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox"></td>
		<td class="a"><input type="checkbox"></td>
		<td><input type="checkbox" checked></td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox"></td>
		<td><input type="checkbox" checked></td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td><input type="checkbox" checked></td>
	</tr>
</table>

<br><br> The challange: <br> Use a single jQuery(Sizzle) selector to get the rightmost checked checkbox of every tr, while considering only td that has class a.

...但是我看不到您可以摆脱最后一个 each 循环（或其他代替它的东西，例如 filter）的方法，因为您想在行内工作。

Answer 3

试试这个，没有 -.each-loop 变体：

$("input").click(function() {

	$(this).closest('tr').find('td.a').removeClass('here')
		.parent().children('.a:has(input:checked):last').addClass('here');
});

.here {
	background: red;
}
.a input {
	width: 2em;
	height: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox"></td>
		<td class="a"><input type="checkbox"></td>
		<td><input type="checkbox" checked></td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox"></td>
		<td><input type="checkbox" checked></td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a"><input type="checkbox" checked></td>
		<td class="a here"><input type="checkbox" checked></td>
		<td><input type="checkbox" checked></td>
	</tr>
</table>