嵌套多重选择器的意外行为

Question

为什么这个代码:

var jQueryString="div.data > div.item > div.quantity,div.article,div.price > :input";  
$(jQueryString).live("click", function(event) { alert(this); });

输出[object HTMLDivElement]代替[object HTMLInputElement] ?

我知道这是一个类似于selector-find-live-returning-the-parent-from-a-multiple-selector的问题，但是我想要一个更好的解决方案(来获得我想要的HTML元素，只修改jQueryString)。

---

这是一个用于教学理解的代码示例，我不能接受像"通过每个输入定义一个jquery搜索字符串"这样的解决方案，因为在实际代码中有很多输入。

@Sotiris的答案太接近了，不完美

---

的完美解决方案是::jQuery, Real:not operator equivalent
P =

Answer 1

因为在您的选择器中，您不是选择三个输入，而是两个div和一个输入。

div.data > div.item > div.quantity select a div

div.article选择div.article

下面选择输入

div.price > :input

在下面的演示中，您可以看到它们都使用"div.data > div.item > div.quantity > :input,div.article > :input,div.price > :input"

提醒[object HTMLInputElement]演示:

http://jsfiddle.net/FDNMD/7/

Answer 2

您应该使用以下行，因为逗号不会像您期望的那样嵌套:

var jQueryString =  "#quantity, #article, #price";

看到这个小提琴:http://jsfiddle.net/FDNMD/4/

你的CSS选择器是这样解释的:

div.data > div.item > div.quantity, /* Select DIV with class quantity*/
div.article, /* Select div with class article */
div.price > :input /* Select input element which is a child of div.price */

id应该只出现一次。因为您已经为这些元素定义了一个ID属性，所以您可以使用ID选择器，而不是嵌套的选择器。

更新

逗号分隔整个选择器。考虑以下现实生活中的语言:

明智的选择包括A, b, c, d, e

在CSS中，你不能构造"句子"。像这样。相反，您必须再次指定整个选择器:

一个明智的选择包括一个，
一个明智的选择包括b，
等。

CSS:

root a, b, c {} /*You did probably not want this*/
/*Desired selector set: */
root a, root b, root c {}
/* More readable: */
root a,
root b,
root c {}

这个页面也许你也会感兴趣(不是关于逗号，而是一般的CSS选择器):

Answer 3

试试这个

http://jsfiddle.net/FDNMD/6/

由于某些原因，多个div选择器会破坏它

Answer 4

如果您删除多个div元素(div.article,div.price)，它可以工作。例如,

var jQueryString="div.data > div.item > div.quantity > :input";
$(jQueryString).live("click", function(event) { alert(this); });

这是操作符优先级的问题。div列表中的逗号的优先级与您期望的不同。

为了进一步证明我的观点，我看了你的例子，我注意到在第三个按钮上它确实工作正常。jQuery将你的表达式解释为3个子表达式:

• div。数据>div.item>div.quantity
• div.article
• div。价格>:输入