Question

我想在用户点击每行中前两个<input>中的任何一个时发出警报，但我当前的代码仅适用于第一行。如何修复我的选择器以适用于其余行？

HTML：

<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>
<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>
<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>

jQuery：

 $("body").on("click", "div input[type='checkbox']:lt(2)", function() {
    alert("x");
});

我在这里有一个JSFiddle：http://jsfiddle.net/yxmeA/393/

Answer 1

您需要使用:nth-child(-n+2)之类的选择器：

$("body").on("click", "div input[type='checkbox']:nth-child(-n+2)", function() {
    alert("x");
});

这是因为你的:lt(2)选择器正在选择所有输入，然后仅过滤到前2个。在这里，我们检查它是否是其父项的前2个子项。

$("body").on("click", "div input[type='checkbox']:nth-child(-n+2)", function() {
    alert("x");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>
<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>
<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>

有关此功能强大的选择器的更多信息，您可以看到nthmaster.com。

Answer 2

对于元素本身进行编号可能是一个好主意，因为看起来你的程序逻辑依赖于元素位置。 CSS选择器非常强大，但可能有一个更简单的解决方案。例如：

HTML：

<div data-y="0">
    <input type='checkbox' data-x="0"/>
    <input type='checkbox' data-x="1" />
    <input type='checkbox' data-x="2" />
</div>
<div data-y="1">
    <input type='checkbox' data-x="0" />
    <input type='checkbox' data-x="1" />
    <input type='checkbox' data-x="2" />
</div>
<div data-y="1">
    <input type='checkbox' data-x="0" />
    <input type='checkbox' data-x="1" />
    <input type='checkbox' data-x="2" />
</div>

JS

$("div > input[type='checkbox']").on("click", function() {
    alert($(this).data('x') + ', ' + $(this).parent().data('y'));
});

http://jsfiddle.net/hhqcwepf/

Answer 3

您可以使用极其简单的选择器来执行此操作。选择所有<input>元素，这些元素不会被其他两个元素添加。

$('div input:not(input+input+input)').click(function() {
  alert("x");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>
<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>
<div>
    <input type='checkbox' />
    <input type='checkbox' />
    <input type='checkbox' />
</div>

`div input [type =＆＃39; checkbox＆＃39;]：lt（2）`只选择第一行

3 个答案: