javascript - 如何使用选择器组合使用 Prototype.js 获取空字段

Question

我如何组合这个选择器并使用 prototype.js 获得输出？

我的 HTML 代码:

 <input id="age" value="">
 <span id="movieSelection" class="defaultText">
 <button >addButton</button>

这是粗略的 HTML 代码，当点击添加按钮时，每次不同的 id，它都会添加一行年龄输入 id 和 span 标签

现在

  $$('input[id*=age]:and[value=""]').length 

会给我空的年龄字段

  $$('span[id*=movieSelection]:and[class*=defaultText]').length

将给我空选择。

现在我想将这两种情况结合在一个 $$().length 中，这将满足我的要求。

假设我有 10 行，因为我填充了 3 个年龄值，所以选择器应该给我答案 7，因为年龄和 movieSelection 列的组合具有空值是 7

请帮帮我。提前致谢。

Answer 1

属性选择器只检查元素的初始状态而不是修改后的状态。因此，您的输入元素的属性选择器将不起作用。如果您只是想确保它不为空，那么您可以使用 :valid 选择器并将必需的属性添加到元素。

您还应该考虑将这两个元素(输入和跨度)包装在其他元素下。现在，跨度和输入之间似乎没有任何关系。如果您有多个跨度和输入，则很难检查哪个跨度对应于哪个输入。

最后要回答您的问题，您可以使用以下选择器。它将选择具有 defaultText 类且前面有空输入元素的 span 元素。但请记住，它只会返回 span 元素。如果您的目标只是检查长度，这就足够了。否则修改此选择器以返回所有元素，包括输入。

'input[id*=age]:not(:valid) + span[id*=movieSelection][class*=defaultText]'

我修改了 wared 创建的 fiddle 。您可以在这里查看:http://jsfiddle.net/e6BdP/9/