css选择器不是最后一个孩子不工作（需要纯css解决方案）

Question

不确定为什么以下css选择器无法正常工作。想要在除DOM中的最后一个字段之外的所有字段中输入100。更喜欢纯css解决方案，即不在jQuery中添加.not（＆＃34;：last＆＃34;）。

＆＃13;

＆＃13;

$("input[id^=FIELD]:not(:last-child)").val("100");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="FIELD1" value="2">
<input id="FIELD2" value="2">
<input id="FIELD3" value="2">
<input id="FIELD4" value="2">

＆＃13;

＆＃13;

＆＃13;

Answer 1

StackOverflow片段会破坏您的代码。

您的代码很好，但需要parent的明确:last-child元素才能在StackOverflow代码段中使用。

通常没有在StackOverflow上显式添加body，这将是自动插入的body元素，但由于某些与StackOverflow片段工作原理相关的奇怪原因，您明确需要在SO上添加父元素让选择器按预期工作。

修改

我刚用CodePen和JSBin检查过，两者似乎都产生了同样的问题：

  

http://jsbin.com/ceguvogoza/1/edit?html,js,output

     

https://codepen.io/connexo/pen/KQYjKR

证明您的代码在真实环境中有效：

  

http://codestylers.de/last-child.html

function usingVanillaJs() {
  Array.from(document.querySelectorAll("input[id^='FIELD']:not(:last-child)")).forEach((input) => {
    input.value = 100;
  })
}

function usingJquery() {
  $("input[id^='FIELD']:not(:last-child)").val(200);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="FIELD1" value="2">
  <input id="FIELD2" value="2">
  <input id="FIELD3" value="2">
  <input id="FIELD4" value="2">
</div>
<button onclick="usingVanillaJs()">Vanilla JS</button>
<button onclick="usingJquery()">jQuery</button>

Answer 2

＆＃13;

＆＃13;

$("input[id^=FIELD]").not(":last").val("100");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="FIELD1" value="2">
<input id="FIELD2" value="2">
<input id="FIELD3" value="2">
<input id="FIELD4" value="2">

＆＃13;

＆＃13;

＆＃13;

对于CSS选择器，只需将last-child更改为last：

$("input[id^=FIELD]:not(:last)").val("100");

如果您向选择器添加父级，last-child也可以使用：

 $("#parentDiv input[id^=FIELD]:not(:last-child)").val("100");

Answer 3

:last-child无法使用，因为它需要parent所以请使用:last-of-type

$('input[id^=FIELD]:not(:last-of-type)').val("100");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="FIELD1" value="2">
<input id="FIELD2" value="2">
<input id="FIELD3" value="2">
<input id="FIELD4" value="2">

父母：

$('#mydiv input[id^=FIELD]:not(:last-child)').val("100");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">
  <input id="FIELD1" value="2">
  <input id="FIELD2" value="2">
  <input id="FIELD3" value="2">
  <input id="FIELD4" value="2">
</div>