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

时间:2013-12-19 10:45:02

标签: javascript css css-selectors prototypejs

如何使用prototype.js组合此选择器并获取输出?

我的HTML代码:

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

这是粗略的HTML代码,当点击添加按钮时,每次添加另外一行年龄输入id和span标记

现在

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

会给我空的年龄字段

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

会给我空选。

现在我想将这两种情况合并在一个$$()。长度中,这将满足我的要求。

假设我有10行,其中我填充了3个年龄值,因此选择器应该给出答案为7作为年龄和movieSelection列的组合,空值为7

请帮帮我。 在此先感谢。

2 个答案:

答案 0 :(得分:3)

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

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

最后,为了回答您的问题,您可以使用以下选择器。它将选择具有defaultText类和&amp;的span元素。前面是空输入元素。但请记住,它只会返回span元素。如果你的目标只是检查长度,这应该足够了。否则,修改此选择器以返回包括输入在内的所有元素。

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

我修改了由wared创建的小提琴。您可以在此处查看:http://jsfiddle.net/e6BdP/9/

答案 1 :(得分:2)

尝试此选择查询

$$('input[id*=age]:and[value=""],span[id*=movieSelection]:and[class*=defaultText]').length