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

Question

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

复选框表。一种类型的复选框是分层的，这意味着如果选中一个复选框，则会对其左侧相同类型的所有复选框进行神奇的检查。

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

＆＃13;

＆＃13;

$("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");
			});
	});
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

是否有办法使用单个jQuery（Sizzle）选择器来获取每个tr最右边选中的复选框，同时仅考虑td类的a。

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");
});

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

...但是我没有看到你摆脱最后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>