获取最正确的输入:使用单个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循环变体：

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