问题
It appears that this selector is not working in ExtJS:
Ext.select('.serviceGridItem:not(:first)')
It is selecting all items, whereas it should only select the last three (there are four total). See the jsfiddle linked below and look at your console for the result.
This is the result:
Ext.select('.serviceGridItem')
constructor {elements: Array[4], el: constructor, self: function, superclass: Object, config: emptyFn…}
Ext.select('.serviceGridItem:first')
constructor {elements: Array[1], el: constructor, self: function, superclass: Object, config: emptyFn…}
Ext.select('.serviceGridItem:not(:first)')
constructor {elements: Array[4], el: constructor, self: function, superclass: Object, config: emptyFn…}
Here is the HTML:
<div class="x-component x-window-item x-component-default" id="dataview-1049" tabindex="-1" style="">
<a href="#" class="serviceGridItem">Legal Compliance</a>
<a href="#" class="serviceGridItem">Departure Package</a>
<a href="#" class="serviceGridItem">House Search</a>
<a href="#" class="serviceGridItem">Language Training</a>
</div>
The JavaScript:
Ext.onReady(function () {
console.log(Ext.select('.serviceGridItem'));
console.log(Ext.select('.serviceGridItem:first'));
console.log(Ext.select('.serviceGridItem:not(:first)')); // should return Array[3] not Array[4]
});
The JSFiddle (look in your console for the result):
http://jsfiddle.net/k4ggq/5/
Is this a bug or is there something I am doing wrong?
回答1:
I can't really tell you how the :first pseudo-selector is supposed to behave. It's not part of the CSS3 standard and I think it was introduced with jQuery. ExtJS apparently seems to interpret it in some way, but I couldn't find anything about it in the docs.
However, you could try using the CSS3 :first-child selector:
Ext.select('.serviceGridItem:not(:first-child)');
which seems to work just fine in your fiddle: http://jsfiddle.net/k4ggq/6/
来源:https://stackoverflow.com/questions/21785001/extjs-bug-selector-not-working-properly