Question

我想知道如何编写一个jQuery选择器来选择下面的每个“输入”项。我不想一次选择它们。这些输入框没有名称或ID。我可能必须使用某种儿童符号，但我不知道该怎么做。

<div id="partdiv">
  <div class="floater">
    <input type="text"/> // Some input box with no id or name
  </div>
  <div id="descriptiondiv">
    <div class="floater">
      <input type="text"/> // Some input box with no id or name
    </div>
    <div id="positiondiv">
      <div class="floater"> 
        <input type="text"/> // Some input box with no id or name
      </div>
    </div>
  </div>
</div>

对于第一个，例如，我尝试过：

    $("#partdiv > input").bind(....

但这没效果。

Answer 1

$('input').bind('...

每个输入都将绑定到您想要的事件（点击，更改，等等）。

当您处于事件功能中时，“this”对应于事件发生的一个输入。（即点击一下），

或者您可以使用$('input').click(...或$('input').change(...

但是我邀请您阅读.on()上的文档，这是一个事件绑定器，可以将它们全部联合起来。

Answer 2

"#partdiv > input"无效，因为您选择了直接的孩子'＆gt;'只是'#partdiv'。

这些会做

1st input: $("#partdiv>.floater>input")
2nd input: $("#descriptiondiv>.floater>input")
3rd input: $("#positiondiv>.floater>input")

我注意到你的div以一种奇怪的方式包裹着，这是你真正的意思吗？

Answer 3

有许多不同的方法可以做到这一点 - 每种方法都有不同的权衡。您可以使用以下选择器：

"#partDiv input:first"
"#descriptiondiv input:first"
"#positiondiv input"

或者这些：

"#partDiv input:eq(0)"
"#partDiv input:eq(1)"
"#partDiv input:eq(2)"

或者这些：

"#partDiv > .floater > input"
"#descriptiondiv > .floater > input"
"#positiondiv > .floater > input"

请注意，执行此操作的“正确”方法是为每个输入提供自己的id或将其放在具有id的容器中（在同一容器中没有其他输入标记）。由于这些都不是真的，你必须使用位置或层次结构信息来辨别哪个输入是哪个。

使用哪种不同的方法取决于您希望精确的HTML结构与选择器之间的关系有多紧或松散（例如，选择器是否仍然适用于HTML的某些类型的更改）。

第一个选项的优点是它不关心div和输入之间有多少级别/层标记，只是你在每个div中选择第一个输入元素。而第三个选项将选择器绑定到一个非常特定的HTML实现，如果你在partDiv和输入之间放置一个额外的div，它将停止工作。如果你这样做，第一个就不会停止工作，所以第一个和第二个比第三个更脆弱。

第二个选项的优点是它完全独立于partDiv中的标记。它唯一关心的是该div中的第一，第二和第三个输入字段。

第三个选项的主要优点是您可以重新排列三个输入字段的顺序，只要您保持选择器中指定的层次结构的唯一性，选择器仍然可以工作。

Answer 4

$("#partdiv > input")表示选择一个输入，该输入是ID为partdiv的元素的直接子元素。要在元素partdiv下的任意位置查找输入，您可以使用$("#partdiv input")。但是，由于它们都来自#partdiv，因此可以立即获得所有输入。所以你需要进一步分解它：

$( '#partdiv .floater input' ) //gets an input which lives under element with class floater which itself lives under element with ID partdiv

等......

请注意，有许多方法可以遮盖这只猫。

Answer 5

这有用吗：

$("#partDiv > input").live("click", function() {
  alert($(this).val());
});

如何使用jQuery选择器来定位这些元素？

5 个答案: