[jQuery] Re: jQuery Selector Help
[ ... snipped ... ] ... and after looking at your code (which always helps), I see you're referencing this (as opposed to jQuery's $(this)), which is why html() wouldn't have worked. In that case, sure. It's been said that this is more efficient than creating a jQuery reference to it via $(this). So to clarify... this.innerHTML is the functional equivalent of $(this).html(), but without the cost of creating a new jQuery object for each iteration of your each(). [ ... snipped ... ] Thanks for the explanation. I went back and cleaned up my code to use jQuery(this).html() instead of this.innerHTML and all is well. Mike
[jQuery] Re: jQuery Selector Help
On Dec 22, 8:03 am, Dhruva Sagar dhruva.sa...@gmail.com wrote: I would suggest you to wrap the sections within * into a div and select that div. Thanks Regards, Dhruva Sagar. [ ... snipped ... ] Unfortunately I don't have control of the generated content. The content is generated by a WordPress Calendar plugin that I am reluctant to modify which is why I would like to find a way to do this with jQuery. Mike
[jQuery] Re: jQuery Selector Help
Well, you selected BR elements, which are empty elements, so it's no mystery why this.innerHTML returns undefined... Also, DIVs shouldn't appear inside SPANs...
Re: [jQuery] Re: jQuery Selector Help
2009/12/22 Šime Vidas sime.vi...@gmail.com
Well, you selected BR elements, which are empty elements, so it's no
mystery why this.innerHTML returns undefined...
Also, DIVs shouldn't appear inside SPANs...
He did state that he's using generated HTML. He has no control over it.
Mike - this isn't really a jQuery problem per se. You're jQuery selectors
match DOM elements. Not so much the contents of those elements.
What you can do is search for the containing element (in this case, you can
look for a span with a class of event), and replace all instances of br
/* with just the br /.
$(document).ready(function() {
var newHTML = $('span.event').html().replace(/(br.*)\s*\*/g, '$1');
$('span.event').html(newHTML);
});
The expression is looking for a br / (or br or br/) followed by any
white space (including tabs), followed by an asterisk. It replaces that
pattern with the br / alone (removing the asterisk).
Disclaimer: I'm no regex guru, so if anyone sees a way to clean up that
expression, please feel free.
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] Re: jQuery Selector Help
On Dec 22, 12:09 pm, Charlie Griefer charlie.grie...@gmail.com
wrote:
2009/12/22 Šime Vidas sime.vi...@gmail.com
Well, you selected BR elements, which are empty elements, so it's no
mystery why this.innerHTML returns undefined...
Also, DIVs shouldn't appear inside SPANs...
He did state that he's using generated HTML. He has no control over it.
Mike - this isn't really a jQuery problem per se. You're jQuery selectors
match DOM elements. Not so much the contents of those elements.
What you can do is search for the containing element (in this case, you can
look for a span with a class of event), and replace all instances of br
/* with just the br /.
$(document).ready(function() {
var newHTML = $('span.event').html().replace(/(br.*)\s*\*/g, '$1');
$('span.event').html(newHTML);
});
The expression is looking for a br / (or br or br/) followed by any
white space (including tabs), followed by an asterisk. It replaces that
pattern with the br / alone (removing the asterisk).
[ ... snipped ... ]
Thanks for pointing me in the right direction. This is what I ended
up getting to work:
jQuery(span.event, .calendar-table).each(function(){
var html = this.innerHTML.replace(/(br\s*\/*)\s*\*/
g, \'$1\');
jQuery(this).html(html) ;
}) ;
I changed the regular expression slightly to eliminate the .* portion
and changed .html() to .innerHTML. I don't know enough jQuery to know
why I had to do that but had seen it elsewhere so tried it and it
worked.
Thanks,
Mike
Re: [jQuery] Re: jQuery Selector Help
On Tue, Dec 22, 2009 at 10:34 AM, Mike Walsh mike_wa...@mindspring.comwrote:
[ ... snipped ... ]
Thanks for pointing me in the right direction. This is what I ended
up getting to work:
jQuery(span.event, .calendar-table).each(function(){
var html = this.innerHTML.replace(/(br\s*\/*)\s*\*/
g, \'$1\');
jQuery(this).html(html) ;
}) ;
I changed the regular expression slightly to eliminate the .* portion
and changed .html() to .innerHTML. I don't know enough jQuery to know
why I had to do that but had seen it elsewhere so tried it and it
worked.
Thanks,
Mike
.html() retrieves the innerHTML.
Really no functional difference, but for the sake of consistency, since
you're leveraging jQuery, I'd prefer to see consistent jQuery code (unless
there's a compelling reason not to).
And yeah... just a preference. Not saying wrong or right. But I am saying
you shouldn't have -had- to do that :)
Anyway, glad you got it working. That's the important bit :)
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
Re: [jQuery] Re: jQuery Selector Help
On Tue, Dec 22, 2009 at 10:40 AM, Charlie Griefer charlie.grie...@gmail.com
wrote:
On Tue, Dec 22, 2009 at 10:34 AM, Mike Walsh mike_wa...@mindspring.comwrote:
[ ... snipped ... ]
Thanks for pointing me in the right direction. This is what I ended
up getting to work:
jQuery(span.event, .calendar-table).each(function(){
var html = this.innerHTML.replace(/(br\s*\/*)\s*\*/
g, \'$1\');
jQuery(this).html(html) ;
}) ;
I changed the regular expression slightly to eliminate the .* portion
and changed .html() to .innerHTML. I don't know enough jQuery to know
why I had to do that but had seen it elsewhere so tried it and it
worked.
Thanks,
Mike
.html() retrieves the innerHTML.
Really no functional difference, but for the sake of consistency, since
you're leveraging jQuery, I'd prefer to see consistent jQuery code (unless
there's a compelling reason not to).
And yeah... just a preference. Not saying wrong or right. But I am saying
you shouldn't have -had- to do that :)
Anyway, glad you got it working. That's the important bit :)
... and after looking at your code (which always helps), I see you're
referencing this (as opposed to jQuery's $(this)), which is why html()
wouldn't have worked.
In that case, sure. It's been said that this is more efficient than
creating a jQuery reference to it via $(this).
So to clarify... this.innerHTML is the functional equivalent of
$(this).html(), but without the cost of creating a new jQuery object for
each iteration of your each().
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] Re: jQuery selector return parent
Is there anyway to write a custom filter which returns the parent nodes of the selector? ie) div.someClass:parentNode or ancestor: div.someClass would return the parent element of div.someClass. Not that I know of, but you might be able to use the :has selector if you know enough about the structure of the document. $(div.otherClass:has(div.someClass)) This might take some tweaking since it may return parents of parents.
[jQuery] Re: jQuery selector return parent
Thanks Dave I think you may be on to something. I think $(*:has( div.someClass)) would work. Won't be fast, but that's not a concern. I'll give it a shot tomorrow. On Oct 21, 12:40 pm, Dave Methvin dave.meth...@gmail.com wrote: Is there anyway to write a custom filter which returns the parent nodes of the selector? ie) div.someClass:parentNode or ancestor: div.someClass would return the parent element of div.someClass. Not that I know of, but you might be able to use the :has selector if you know enough about the structure of the document. $(div.otherClass:has(div.someClass)) This might take some tweaking since it may return parents of parents.
[jQuery] Re: jQuery selector for style attribute
Got it working, see here,
http://code.google.com/p/aost/wiki/CustomJQuerySelectorInTellurium#:styles
On Aug 27, 5:57 pm, John jian.fang.subscr...@gmail.com wrote:
Seems I should use css(), not attr().
On Aug 27, 3:46 pm, John jian.fang.subscr...@gmail.com wrote:
Seems always begin with ext-gen.
I wonder if I could split the style content into multiple single
attributes
and then use attr() to compare. Based on that, I could create a custom
selector.
Then the question is, for example, I have a style attribute such as
overflow: auto; width: 356px; height: 100px; ,
would the style be equal to the combination of the following
attributes
$(elem).attr(overflow) == auto
$(elem)attr(width) == 356px
$(elem)attr(height) == 100px
If it does, the custom selector could come to rescue.
On Aug 27, 3:09 pm, James james.gp@gmail.com wrote:
Is that for the whole ID? (e.g. it maybe 'ext-gen439' once or 'blah-
foo3456' another)
Or only just the number at the end? (e.g. always begin with ext-gen)
On Aug 26, 5:10 pm, John jian.fang.subscr...@gmail.com wrote:
Also, it is not possible for us to use Ids because the ids are
dynamically
generated by the ExtJS framework.
On Aug 26, 4:34 pm, James james.gp@gmail.com wrote:
As Paolo mentioned, despite how it looks in a browser's source, the
internal representation within the DOM may be different depending on
the browser.
In one browser it could be:
overflow: auto; width: 356px; height: 100px;
in another it could be:
overflow:auto; width:356px; height:100px;
in another it could be:
overflow:auto;width:356px;height:100px;
There's got to be a better way to achieve what you want to do. Since
we have no idea what you're trying to do, maybe you could explain it
as to what the rhyme or reason to the selection sets you're trying to
select is.
Looking at the code you've provided, is it possible to use the ID in
anyway? You could do selections with conditions like if ID begins
with 'ext-gen' and other conditions along with that. As long as
you're not trying to read the style string.
On Aug 26, 4:06 am,Johnjian.fang.subscr...@gmail.com wrote:
Thanks.
Here is the html source,
div id=x-form-el-ext-comp-1043 class=x-form-element
style=padding-left: 130px;
div id=ext-gen438 class=x-form-field-wrap style=width:
360px;
input id=programId type=hidden name=programId
value=/
input id=ext-comp-1043 class=x-form-text
x-form-field
x-combo-noedit type=text autocomplete=off
size=24 readonly=true style=width: 343px;/
img id=ext-gen439 class=x-form-trigger x-form-arrow-
trigger style=overflow: auto; width: 356px; height: 100px;
src=images/s.gif/
/div
/div
The style in the jQuery selector should match the one defined in the
html source. I wonder if I
did any other thing wrong here.
Thanks,
John
On Aug 26, 6:45 am, Paolo Chiodi chiod...@gmail.com wrote:
Maybe that that the style attribute value should be exactly equal
to
the one contained in html. I think style=A:B C:D doesn't match
style=C:D A:B.
May also be that the browser has an internal rapresentation of the
style attribute slightly different from the one written in the
html
(never tried to see with firebug some differen orders?).
Otherwise if you create the style attribute by using
.css('A','B'),
you can't be sure of what the entire style attribute could be.
Paolo
On Tue, Aug 25, 2009 at 11:22
PM,Johnjian.fang.subscr...@gmail.com wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors
based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width:
356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width:
356px;
height: 100px;]) img[style=overflow: auto; width: 356px;
height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
[jQuery] Re: jQuery selector for style attribute
Is that for the whole ID? (e.g. it maybe 'ext-gen439' once or 'blah-
foo3456' another)
Or only just the number at the end? (e.g. always begin with ext-gen)
On Aug 26, 5:10 pm, John jian.fang.subscr...@gmail.com wrote:
Also, it is not possible for us to use Ids because the ids are
dynamically
generated by the ExtJS framework.
On Aug 26, 4:34 pm, James james.gp@gmail.com wrote:
As Paolo mentioned, despite how it looks in a browser's source, the
internal representation within the DOM may be different depending on
the browser.
In one browser it could be:
overflow: auto; width: 356px; height: 100px;
in another it could be:
overflow:auto; width:356px; height:100px;
in another it could be:
overflow:auto;width:356px;height:100px;
There's got to be a better way to achieve what you want to do. Since
we have no idea what you're trying to do, maybe you could explain it
as to what the rhyme or reason to the selection sets you're trying to
select is.
Looking at the code you've provided, is it possible to use the ID in
anyway? You could do selections with conditions like if ID begins
with 'ext-gen' and other conditions along with that. As long as
you're not trying to read the style string.
On Aug 26, 4:06 am,Johnjian.fang.subscr...@gmail.com wrote:
Thanks.
Here is the html source,
div id=x-form-el-ext-comp-1043 class=x-form-element
style=padding-left: 130px;
div id=ext-gen438 class=x-form-field-wrap style=width:
360px;
input id=programId type=hidden name=programId
value=/
input id=ext-comp-1043 class=x-form-text x-form-field
x-combo-noedit type=text autocomplete=off
size=24 readonly=true style=width: 343px;/
img id=ext-gen439 class=x-form-trigger x-form-arrow-
trigger style=overflow: auto; width: 356px; height: 100px;
src=images/s.gif/
/div
/div
The style in the jQuery selector should match the one defined in the
html source. I wonder if I
did any other thing wrong here.
Thanks,
John
On Aug 26, 6:45 am, Paolo Chiodi chiod...@gmail.com wrote:
Maybe that that the style attribute value should be exactly equal to
the one contained in html. I think style=A:B C:D doesn't match
style=C:D A:B.
May also be that the browser has an internal rapresentation of the
style attribute slightly different from the one written in the html
(never tried to see with firebug some differen orders?).
Otherwise if you create the style attribute by using .css('A','B'),
you can't be sure of what the entire style attribute could be.
Paolo
On Tue, Aug 25, 2009 at 11:22 PM,Johnjian.fang.subscr...@gmail.com
wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De:John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery selector to see
if I
could use the style attribute,
img id=ext-gen439 class=x-form-trigger x-form-arrow-trigger
style=overflow: auto; width: 356px; height: 100px; src=images/
s.gif/
but seems the selector
img[style=overflow: auto; width: 356px; height: 100px;]
does not work at all. What would be the correct selector for the
style
attribute?
Thanks in advance,
John
[jQuery] Re: jQuery selector for style attribute
Seems I should use css(), not attr().
On Aug 27, 3:46 pm, John jian.fang.subscr...@gmail.com wrote:
Seems always begin with ext-gen.
I wonder if I could split the style content into multiple single
attributes
and then use attr() to compare. Based on that, I could create a custom
selector.
Then the question is, for example, I have a style attribute such as
overflow: auto; width: 356px; height: 100px; ,
would the style be equal to the combination of the following
attributes
$(elem).attr(overflow) == auto
$(elem)attr(width) == 356px
$(elem)attr(height) == 100px
If it does, the custom selector could come to rescue.
On Aug 27, 3:09 pm, James james.gp@gmail.com wrote:
Is that for the whole ID? (e.g. it maybe 'ext-gen439' once or 'blah-
foo3456' another)
Or only just the number at the end? (e.g. always begin with ext-gen)
On Aug 26, 5:10 pm, John jian.fang.subscr...@gmail.com wrote:
Also, it is not possible for us to use Ids because the ids are
dynamically
generated by the ExtJS framework.
On Aug 26, 4:34 pm, James james.gp@gmail.com wrote:
As Paolo mentioned, despite how it looks in a browser's source, the
internal representation within the DOM may be different depending on
the browser.
In one browser it could be:
overflow: auto; width: 356px; height: 100px;
in another it could be:
overflow:auto; width:356px; height:100px;
in another it could be:
overflow:auto;width:356px;height:100px;
There's got to be a better way to achieve what you want to do. Since
we have no idea what you're trying to do, maybe you could explain it
as to what the rhyme or reason to the selection sets you're trying to
select is.
Looking at the code you've provided, is it possible to use the ID in
anyway? You could do selections with conditions like if ID begins
with 'ext-gen' and other conditions along with that. As long as
you're not trying to read the style string.
On Aug 26, 4:06 am,Johnjian.fang.subscr...@gmail.com wrote:
Thanks.
Here is the html source,
div id=x-form-el-ext-comp-1043 class=x-form-element
style=padding-left: 130px;
div id=ext-gen438 class=x-form-field-wrap style=width:
360px;
input id=programId type=hidden name=programId
value=/
input id=ext-comp-1043 class=x-form-text x-form-field
x-combo-noedit type=text autocomplete=off
size=24 readonly=true style=width: 343px;/
img id=ext-gen439 class=x-form-trigger x-form-arrow-
trigger style=overflow: auto; width: 356px; height: 100px;
src=images/s.gif/
/div
/div
The style in the jQuery selector should match the one defined in the
html source. I wonder if I
did any other thing wrong here.
Thanks,
John
On Aug 26, 6:45 am, Paolo Chiodi chiod...@gmail.com wrote:
Maybe that that the style attribute value should be exactly equal to
the one contained in html. I think style=A:B C:D doesn't match
style=C:D A:B.
May also be that the browser has an internal rapresentation of the
style attribute slightly different from the one written in the html
(never tried to see with firebug some differen orders?).
Otherwise if you create the style attribute by using .css('A','B'),
you can't be sure of what the entire style attribute could be.
Paolo
On Tue, Aug 25, 2009 at 11:22
PM,Johnjian.fang.subscr...@gmail.com wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based
on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De:John
Para:
[jQuery] Re: jQuery selector for style attribute
Seems always begin with ext-gen.
I wonder if I could split the style content into multiple single
attributes
and then use attr() to compare. Based on that, I could create a custom
selector.
Then the question is, for example, I have a style attribute such as
overflow: auto; width: 356px; height: 100px; ,
would the style be equal to the combination of the following
attributes
$(elem).attr(overflow) == auto
$(elem)attr(width) == 356px
$(elem)attr(height) == 100px
If it does, the custom selector could come to rescue.
On Aug 27, 3:09 pm, James james.gp@gmail.com wrote:
Is that for the whole ID? (e.g. it maybe 'ext-gen439' once or 'blah-
foo3456' another)
Or only just the number at the end? (e.g. always begin with ext-gen)
On Aug 26, 5:10 pm, John jian.fang.subscr...@gmail.com wrote:
Also, it is not possible for us to use Ids because the ids are
dynamically
generated by the ExtJS framework.
On Aug 26, 4:34 pm, James james.gp@gmail.com wrote:
As Paolo mentioned, despite how it looks in a browser's source, the
internal representation within the DOM may be different depending on
the browser.
In one browser it could be:
overflow: auto; width: 356px; height: 100px;
in another it could be:
overflow:auto; width:356px; height:100px;
in another it could be:
overflow:auto;width:356px;height:100px;
There's got to be a better way to achieve what you want to do. Since
we have no idea what you're trying to do, maybe you could explain it
as to what the rhyme or reason to the selection sets you're trying to
select is.
Looking at the code you've provided, is it possible to use the ID in
anyway? You could do selections with conditions like if ID begins
with 'ext-gen' and other conditions along with that. As long as
you're not trying to read the style string.
On Aug 26, 4:06 am,Johnjian.fang.subscr...@gmail.com wrote:
Thanks.
Here is the html source,
div id=x-form-el-ext-comp-1043 class=x-form-element
style=padding-left: 130px;
div id=ext-gen438 class=x-form-field-wrap style=width:
360px;
input id=programId type=hidden name=programId
value=/
input id=ext-comp-1043 class=x-form-text x-form-field
x-combo-noedit type=text autocomplete=off
size=24 readonly=true style=width: 343px;/
img id=ext-gen439 class=x-form-trigger x-form-arrow-
trigger style=overflow: auto; width: 356px; height: 100px;
src=images/s.gif/
/div
/div
The style in the jQuery selector should match the one defined in the
html source. I wonder if I
did any other thing wrong here.
Thanks,
John
On Aug 26, 6:45 am, Paolo Chiodi chiod...@gmail.com wrote:
Maybe that that the style attribute value should be exactly equal to
the one contained in html. I think style=A:B C:D doesn't match
style=C:D A:B.
May also be that the browser has an internal rapresentation of the
style attribute slightly different from the one written in the html
(never tried to see with firebug some differen orders?).
Otherwise if you create the style attribute by using .css('A','B'),
you can't be sure of what the entire style attribute could be.
Paolo
On Tue, Aug 25, 2009 at 11:22 PM,Johnjian.fang.subscr...@gmail.com
wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De:John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery
[jQuery] Re: jQuery selector for style attribute
Thanks.
Here is the html source,
div id=x-form-el-ext-comp-1043 class=x-form-element
style=padding-left: 130px;
div id=ext-gen438 class=x-form-field-wrap style=width:
360px;
input id=programId type=hidden name=programId
value=/
input id=ext-comp-1043 class=x-form-text x-form-field
x-combo-noedit type=text autocomplete=off
size=24 readonly=true style=width: 343px;/
img id=ext-gen439 class=x-form-trigger x-form-arrow-
trigger style=overflow: auto; width: 356px; height: 100px;
src=images/s.gif/
/div
/div
The style in the jQuery selector should match the one defined in the
html source. I wonder if I
did any other thing wrong here.
Thanks,
John
On Aug 26, 6:45 am, Paolo Chiodi chiod...@gmail.com wrote:
Maybe that that the style attribute value should be exactly equal to
the one contained in html. I think style=A:B C:D doesn't match
style=C:D A:B.
May also be that the browser has an internal rapresentation of the
style attribute slightly different from the one written in the html
(never tried to see with firebug some differen orders?).
Otherwise if you create the style attribute by using .css('A','B'),
you can't be sure of what the entire style attribute could be.
Paolo
On Tue, Aug 25, 2009 at 11:22 PM, Johnjian.fang.subscr...@gmail.com wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De: John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery selector to see if I
could use the style attribute,
img id=ext-gen439 class=x-form-trigger x-form-arrow-trigger
style=overflow: auto; width: 356px; height: 100px; src=images/
s.gif/
but seems the selector
img[style=overflow: auto; width: 356px; height: 100px;]
does not work at all. What would be the correct selector for the style
attribute?
Thanks in advance,
John
[jQuery] Re: jQuery selector for style attribute
As Paolo mentioned, despite how it looks in a browser's source, the
internal representation within the DOM may be different depending on
the browser.
In one browser it could be:
overflow: auto; width: 356px; height: 100px;
in another it could be:
overflow:auto; width:356px; height:100px;
in another it could be:
overflow:auto;width:356px;height:100px;
There's got to be a better way to achieve what you want to do. Since
we have no idea what you're trying to do, maybe you could explain it
as to what the rhyme or reason to the selection sets you're trying to
select is.
Looking at the code you've provided, is it possible to use the ID in
anyway? You could do selections with conditions like if ID begins
with 'ext-gen' and other conditions along with that. As long as
you're not trying to read the style string.
On Aug 26, 4:06 am, John jian.fang.subscr...@gmail.com wrote:
Thanks.
Here is the html source,
div id=x-form-el-ext-comp-1043 class=x-form-element
style=padding-left: 130px;
div id=ext-gen438 class=x-form-field-wrap style=width:
360px;
input id=programId type=hidden name=programId
value=/
input id=ext-comp-1043 class=x-form-text x-form-field
x-combo-noedit type=text autocomplete=off
size=24 readonly=true style=width: 343px;/
img id=ext-gen439 class=x-form-trigger x-form-arrow-
trigger style=overflow: auto; width: 356px; height: 100px;
src=images/s.gif/
/div
/div
The style in the jQuery selector should match the one defined in the
html source. I wonder if I
did any other thing wrong here.
Thanks,
John
On Aug 26, 6:45 am, Paolo Chiodi chiod...@gmail.com wrote:
Maybe that that the style attribute value should be exactly equal to
the one contained in html. I think style=A:B C:D doesn't match
style=C:D A:B.
May also be that the browser has an internal rapresentation of the
style attribute slightly different from the one written in the html
(never tried to see with firebug some differen orders?).
Otherwise if you create the style attribute by using .css('A','B'),
you can't be sure of what the entire style attribute could be.
Paolo
On Tue, Aug 25, 2009 at 11:22 PM, Johnjian.fang.subscr...@gmail.com wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De: John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery selector to see if I
could use the style attribute,
img id=ext-gen439 class=x-form-trigger x-form-arrow-trigger
style=overflow: auto; width: 356px; height: 100px; src=images/
s.gif/
but seems the selector
img[style=overflow: auto; width: 356px; height: 100px;]
does not work at all. What would be the correct selector for the style
attribute?
Thanks in advance,
John
[jQuery] Re: jQuery selector for style attribute
Also, it is not possible for us to use Ids because the ids are
dynamically
generated by the ExtJS framework.
On Aug 26, 4:34 pm, James james.gp@gmail.com wrote:
As Paolo mentioned, despite how it looks in a browser's source, the
internal representation within the DOM may be different depending on
the browser.
In one browser it could be:
overflow: auto; width: 356px; height: 100px;
in another it could be:
overflow:auto; width:356px; height:100px;
in another it could be:
overflow:auto;width:356px;height:100px;
There's got to be a better way to achieve what you want to do. Since
we have no idea what you're trying to do, maybe you could explain it
as to what the rhyme or reason to the selection sets you're trying to
select is.
Looking at the code you've provided, is it possible to use the ID in
anyway? You could do selections with conditions like if ID begins
with 'ext-gen' and other conditions along with that. As long as
you're not trying to read the style string.
On Aug 26, 4:06 am,Johnjian.fang.subscr...@gmail.com wrote:
Thanks.
Here is the html source,
div id=x-form-el-ext-comp-1043 class=x-form-element
style=padding-left: 130px;
div id=ext-gen438 class=x-form-field-wrap style=width:
360px;
input id=programId type=hidden name=programId
value=/
input id=ext-comp-1043 class=x-form-text x-form-field
x-combo-noedit type=text autocomplete=off
size=24 readonly=true style=width: 343px;/
img id=ext-gen439 class=x-form-trigger x-form-arrow-
trigger style=overflow: auto; width: 356px; height: 100px;
src=images/s.gif/
/div
/div
The style in the jQuery selector should match the one defined in the
html source. I wonder if I
did any other thing wrong here.
Thanks,
John
On Aug 26, 6:45 am, Paolo Chiodi chiod...@gmail.com wrote:
Maybe that that the style attribute value should be exactly equal to
the one contained in html. I think style=A:B C:D doesn't match
style=C:D A:B.
May also be that the browser has an internal rapresentation of the
style attribute slightly different from the one written in the html
(never tried to see with firebug some differen orders?).
Otherwise if you create the style attribute by using .css('A','B'),
you can't be sure of what the entire style attribute could be.
Paolo
On Tue, Aug 25, 2009 at 11:22 PM,Johnjian.fang.subscr...@gmail.com
wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De:John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery selector to see if
I
could use the style attribute,
img id=ext-gen439 class=x-form-trigger x-form-arrow-trigger
style=overflow: auto; width: 356px; height: 100px; src=images/
s.gif/
but seems the selector
img[style=overflow: auto; width: 356px; height: 100px;]
does not work at all. What would be the correct selector for the
style
attribute?
Thanks in advance,
John
[jQuery] Re: jQuery selector for style attribute
I am working on the open source project: Tellurium automated testing
framework,
which is a web testing framework built on top of Selenium. We leverage
jQuery
to add jQuery selector as a locator to speed up the test performance
in IE and
also add other new functionalities. More details could be found at,
http://code.google.com/p/aost/wiki/TelluriumjQuerySelector
http://code.google.com/p/aost/wiki/jQuerySelectorCache
Basically, we define a UI in the format, for example,
ui.Container(uid: GoogleSearchModule, clocator: [tag: td], group:
true){
InputBox(uid: Input, clocator: [title: Google Search])
SubmitButton(uid: Search, clocator: [name: btnG, value: Google
Search])
SubmitButton(uid: ImFeelingLucky, clocator: [value: I'm Feeling
Lucky])
}
The framework will automatically generate the runtime jQuery selector
based on
the UI element attributes. We added the jQuery selector support couple
months
ago and it worked pretty well. Recently, one user tried to use the
style attribute,
but the generated jQuery selector did not work for the style
attribute. That is why
I am looking for a solution to this. Your insightful suggestions are
highly appreciated.
BTW, we only tested the style attribute in Firefox, but still not
working. :(.
Thanks,
John
On Aug 26, 4:34 pm, James james.gp@gmail.com wrote:
As Paolo mentioned, despite how it looks in a browser's source, the
internal representation within the DOM may be different depending on
the browser.
In one browser it could be:
overflow: auto; width: 356px; height: 100px;
in another it could be:
overflow:auto; width:356px; height:100px;
in another it could be:
overflow:auto;width:356px;height:100px;
There's got to be a better way to achieve what you want to do. Since
we have no idea what you're trying to do, maybe you could explain it
as to what the rhyme or reason to the selection sets you're trying to
select is.
Looking at the code you've provided, is it possible to use the ID in
anyway? You could do selections with conditions like if ID begins
with 'ext-gen' and other conditions along with that. As long as
you're not trying to read the style string.
On Aug 26, 4:06 am,Johnjian.fang.subscr...@gmail.com wrote:
Thanks.
Here is the html source,
div id=x-form-el-ext-comp-1043 class=x-form-element
style=padding-left: 130px;
div id=ext-gen438 class=x-form-field-wrap style=width:
360px;
input id=programId type=hidden name=programId
value=/
input id=ext-comp-1043 class=x-form-text x-form-field
x-combo-noedit type=text autocomplete=off
size=24 readonly=true style=width: 343px;/
img id=ext-gen439 class=x-form-trigger x-form-arrow-
trigger style=overflow: auto; width: 356px; height: 100px;
src=images/s.gif/
/div
/div
The style in the jQuery selector should match the one defined in the
html source. I wonder if I
did any other thing wrong here.
Thanks,
John
On Aug 26, 6:45 am, Paolo Chiodi chiod...@gmail.com wrote:
Maybe that that the style attribute value should be exactly equal to
the one contained in html. I think style=A:B C:D doesn't match
style=C:D A:B.
May also be that the browser has an internal rapresentation of the
style attribute slightly different from the one written in the html
(never tried to see with firebug some differen orders?).
Otherwise if you create the style attribute by using .css('A','B'),
you can't be sure of what the entire style attribute could be.
Paolo
On Tue, Aug 25, 2009 at 11:22 PM,Johnjian.fang.subscr...@gmail.com
wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De:John
Para: jQuery (English)
Enviada
[jQuery] Re: jQuery selector for style attribute
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De: John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery selector to see if I
could use the style attribute,
img id=ext-gen439 class=x-form-trigger x-form-arrow-trigger
style=overflow: auto; width: 356px; height: 100px; src=images/
s.gif/
but seems the selector
img[style=overflow: auto; width: 356px; height: 100px;]
does not work at all. What would be the correct selector for the style
attribute?
Thanks in advance,
John
[jQuery] Re: jQuery selector for style attribute
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De: John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery selector to see if I
could use the style attribute,
img id=ext-gen439 class=x-form-trigger x-form-arrow-trigger
style=overflow: auto; width: 356px; height: 100px; src=images/
s.gif/
but seems the selector
img[style=overflow: auto; width: 356px; height: 100px;]
does not work at all. What would be the correct selector for the style
attribute?
Thanks in advance,
John
[jQuery] Re: jQuery selector for style attribute
Couldn't you just set another class for where you have that long style
attribute? That'll make it so much nicer and less error prone for what
you're trying to achieve. I'm not telling you that you need to remove
the inline style, but just added another class on the element where
you have the inline style. It'll make the jQuery selection easier.
On Aug 25, 11:22 am, John jian.fang.subscr...@gmail.com wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De: John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery selector to see if I
could use the style attribute,
img id=ext-gen439 class=x-form-trigger x-form-arrow-trigger
style=overflow: auto; width: 356px; height: 100px; src=images/
s.gif/
but seems the selector
img[style=overflow: auto; width: 356px; height: 100px;]
does not work at all. What would be the correct selector for the style
attribute?
Thanks in advance,
John
[jQuery] Re: jQuery selector for style attribute
That may not be an option, at least now. The reason is that the jQuery
selector is automatically generated by a framework, which may be
rather random and difficult to set another class.
The first thing is to get it work. As long as the syntax is correct,
it
should work fine, right? I care more about the correctness of the
syntax.
Thanks,
John
On Aug 25, 5:36 pm, James james.gp@gmail.com wrote:
Couldn't you just set another class for where you have that long style
attribute? That'll make it so much nicer and less error prone for what
you're trying to achieve. I'm not telling you that you need to remove
the inline style, but just added another class on the element where
you have the inline style. It'll make the jQuery selection easier.
On Aug 25, 11:22 am, John jian.fang.subscr...@gmail.com wrote:
Thanks Maurício for your quick response.
I have a program to automatically generate jQuery selectors based on
some UI element attributes and seems your syntax is not always
working. For example,
1) working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img')
2) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img')
3) Not working: $('div:has(input[type=text][readonly=true], img
[style=overflow: auto; width: 356px; height: 100px;]) img
[style=overflow: auto; width: 356px; height: 100px;]')
4) Not working: $('div:has(input[type=text][readonly=true]
[style=width: 343px;], img[style=overflow: auto; width: 356px;
height: 100px;]) img[style=overflow: auto; width: 356px; height:
100px;]')
Here not working means it returns empty object where it should
return non-empty object.
Do you know what is wrong?
Thanks again,
John
On Aug 25, 2:50 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Sintax for the selector is:
$('img[style=overflow: auto; width: 356px; height: 100px;]')
Maurício
-Mensagem Original-
De: John
Para: jQuery (English)
Enviada em: terça-feira, 25 de agosto de 2009 14:36
Assunto: [jQuery] jQuery selector for style attribute
Hi,
I want to select the following image using jQuery selector to see if I
could use the style attribute,
img id=ext-gen439 class=x-form-trigger x-form-arrow-trigger
style=overflow: auto; width: 356px; height: 100px; src=images/
s.gif/
but seems the selector
img[style=overflow: auto; width: 356px; height: 100px;]
does not work at all. What would be the correct selector for the style
attribute?
Thanks in advance,
John
[jQuery] Re: jQuery selector performance / jQuery Tester
@Karl: o, that was a serious cp bug... :) I was aware that IE6
and 7 don't support getElementsByClassName (see my initial message),
still the results of my first test showed similar results for the
class selector. I hope I didn't have another cp bug in there... ;)
@Mike: the pages I'm working on are rather simple (at least compared
to something like the Yahoo homepage). So I guess using
element.MyClass as a selector is fine for me. I already thought that
descending from the closest parent ID come into play, when you have a
lot of elements on your page.
Thanks guys!
On 3 Jul., 01:57, Michael Geary m...@mg.to wrote:
You can't measure whether one selector will be faster than another on all
possible pages. All you can measure is which is faster on the page you're
testing.
On a page with only a single a element, an 'a.submit' or even just an 'a'
selector will be faster than '#content a.submit', because it's doing less
work. It will find that a element right away, and since that's the only
a element, you're done right there. Starting the search from #content
makes no difference except to take extra time.
Contrast that with a page with a thousand a elements, where only a few of
those elements (or just one) are inside the #content element. Now using
'#content a.submit' will pay off, because it saves jQuery from having to
scan through all the other a elements - it only has to look at the ones
inside the #content element.
This will vary by browser and by jQuery version, but the point to keep in
mind is that selectors perform differently in very complex pages - and of
course those are the pages where you care the most.
-Mike
From: olsch01
Hi Karl,
thanks for your reply.
I used jQuery tester in FF2 + 3, IE6, 7 + 8, Opera 9.64 and I
think also in Safari 4 (on my Win XP machine). The results
were are all kinda similar. Using the class selector was
always fastest.
I just ran the following test (choosing jQuery 1.3.2 again):
test('#content a.submit');
test('a.submit');
test('.submit');
test('(#myDiv).find(span.myClass)');
The results in FF3:
#content a.submit: 0.448s
a.submit: 0.344s
.submit: 0.331s
(#myDiv).find(span.myClass): 0.399s
The results for IE are a bit strange and different from my
earlier results.
IE6:
#content a.submit: 1.641s
a.submit: 1.438s
.submit: 4.172s
(#myDiv).find(span.myClass): 4.484s
IE7 (IE Tester tool):
#content a.submit: 2.046s
a.submit: 1.922s
.submit: 4.969s
(#myDiv).find(span.myClass): 4.562s
IE8 (also IE Tester tool):
#content a.submit: 0.25s
a.submit: 0.219s
.submit: 0.219s
(#myDiv).find(span.myClass): 3.578s
So only using the class name is much slower here.
Looking at my earlier test and this one, a.submit (i.e.
element.myClass) has shown the best overall performance .
Any comments? :)
Cheers
On 2 Jul., 19:36, Karl Swedberg k...@englishrules.com wrote:
On Jul 2, 2009, at 8:45 AM, north wrote:
Hi,
I just tested all my jQuery selectors using the jQuery Tester
(http:// jquery.nodnod.net), and the results seem to contradict
one thing I read in a performance article: that you
should descend
from the closest parent ID when using classes in your
selector (the
article says April 09, so the latest jQuery version was
already available).
In my tests, using just the class selector (like
span.myClass) was
always fastest (sometimes twice as fast as #myDiv
span.myClass), and
this in all browsers I tested, not just the ones supporting
getElementsByClassName.
Maybe descending from the closest parent ID becomes a factor when
you have a lot of elements on you page? Any experiences?
Thanks
If the selectors aren't causing a discernible bottleneck, I
wouldn't
worry too much about optimizing them. Just out of
curiosity, though,
what happens if you do this:
$('#myDiv').find('span.myClass');
any faster?
Also, which browser are you testing?
--Karl
[jQuery] Re: jQuery selector performance / jQuery Tester
I re-ran the test now.
test('#content a.submit');
test('a.submit');
test('.submit');
test('(#content).find(a.submit)');
Basically I get the same result: for my pages (!) element.MyClass has
the best average performance.
I guess it's as Karl mentioned earlier: If the selectors aren't
causing a discernible bottleneck, I wouldn't worry too much about
optimizing them.
But it's interesting to play around with those tests. :)
Cheers
On 3 Jul., 09:28, olsch01 ollo...@web.de wrote:
@Karl: o, that was a serious cp bug... :) I was aware that IE6
and 7 don't support getElementsByClassName (see my initial message),
still the results of my first test showed similar results for the
class selector. I hope I didn't have another cp bug in there... ;)
@Mike: the pages I'm working on are rather simple (at least compared
to something like the Yahoo homepage). So I guess using
element.MyClass as a selector is fine for me. I already thought that
descending from the closest parent ID come into play, when you have a
lot of elements on your page.
Thanks guys!
On 3 Jul., 01:57, Michael Geary m...@mg.to wrote:
You can't measure whether one selector will be faster than another on all
possible pages. All you can measure is which is faster on the page you're
testing.
On a page with only a single a element, an 'a.submit' or even just an 'a'
selector will be faster than '#content a.submit', because it's doing less
work. It will find that a element right away, and since that's the only
a element, you're done right there. Starting the search from #content
makes no difference except to take extra time.
Contrast that with a page with a thousand a elements, where only a few of
those elements (or just one) are inside the #content element. Now using
'#content a.submit' will pay off, because it saves jQuery from having to
scan through all the other a elements - it only has to look at the ones
inside the #content element.
This will vary by browser and by jQuery version, but the point to keep in
mind is that selectors perform differently in very complex pages - and of
course those are the pages where you care the most.
-Mike
From: olsch01
Hi Karl,
thanks for your reply.
I used jQuery tester in FF2 + 3, IE6, 7 + 8, Opera 9.64 and I
think also in Safari 4 (on my Win XP machine). The results
were are all kinda similar. Using the class selector was
always fastest.
I just ran the following test (choosing jQuery 1.3.2 again):
test('#content a.submit');
test('a.submit');
test('.submit');
test('(#myDiv).find(span.myClass)');
The results in FF3:
#content a.submit: 0.448s
a.submit: 0.344s
.submit: 0.331s
(#myDiv).find(span.myClass): 0.399s
The results for IE are a bit strange and different from my
earlier results.
IE6:
#content a.submit: 1.641s
a.submit: 1.438s
.submit: 4.172s
(#myDiv).find(span.myClass): 4.484s
IE7 (IE Tester tool):
#content a.submit: 2.046s
a.submit: 1.922s
.submit: 4.969s
(#myDiv).find(span.myClass): 4.562s
IE8 (also IE Tester tool):
#content a.submit: 0.25s
a.submit: 0.219s
.submit: 0.219s
(#myDiv).find(span.myClass): 3.578s
So only using the class name is much slower here.
Looking at my earlier test and this one, a.submit (i.e.
element.myClass) has shown the best overall performance .
Any comments? :)
Cheers
On 2 Jul., 19:36, Karl Swedberg k...@englishrules.com wrote:
On Jul 2, 2009, at 8:45 AM, north wrote:
Hi,
I just tested all my jQuery selectors using the jQuery Tester
(http:// jquery.nodnod.net), and the results seem to contradict
one thing I read in a performance article: that you
should descend
from the closest parent ID when using classes in your
selector (the
article says April 09, so the latest jQuery version was
already available).
In my tests, using just the class selector (like
span.myClass) was
always fastest (sometimes twice as fast as #myDiv
span.myClass), and
this in all browsers I tested, not just the ones supporting
getElementsByClassName.
Maybe descending from the closest parent ID becomes a factor when
you have a lot of elements on you page? Any experiences?
Thanks
If the selectors aren't causing a discernible bottleneck, I
wouldn't
worry too much about optimizing them. Just out of
curiosity, though,
what happens if you do this:
$('#myDiv').find('span.myClass');
any faster?
Also, which browser are you testing?
--Karl
[jQuery] Re: jQuery selector performance / jQuery Tester
On Jul 2, 2009, at 8:45 AM, north wrote:
Hi,
I just tested all my jQuery selectors using the jQuery Tester (http://
jquery.nodnod.net), and the results seem to contradict one thing I
read in a performance article: that you should descend from the
closest parent ID when using classes in your selector (the article
says April 09, so the latest jQuery version was already available).
In my tests, using just the class selector (like span.myClass) was
always fastest (sometimes twice as fast as #myDiv span.myClass), and
this in all browsers I tested, not just the ones supporting
getElementsByClassName.
Maybe descending from the closest parent ID becomes a factor when you
have a lot of elements on you page? Any experiences?
Thanks
If the selectors aren't causing a discernible bottleneck, I wouldn't
worry too much about optimizing them. Just out of curiosity, though,
what happens if you do this:
$('#myDiv').find('span.myClass');
any faster?
Also, which browser are you testing?
--Karl
[jQuery] Re: jQuery selector performance / jQuery Tester
Hi Karl,
thanks for your reply.
I used jQuery tester in FF2 + 3, IE6, 7 + 8, Opera 9.64 and I think
also in Safari 4 (on my Win XP machine). The results were are all
kinda similar. Using the class selector was always fastest.
I just ran the following test (choosing jQuery 1.3.2 again):
test('#content a.submit');
test('a.submit');
test('.submit');
test('(#myDiv).find(span.myClass)');
The results in FF3:
#content a.submit: 0.448s
a.submit: 0.344s
.submit: 0.331s
(#myDiv).find(span.myClass): 0.399s
The results for IE are a bit strange and different from my earlier
results.
IE6:
#content a.submit: 1.641s
a.submit: 1.438s
.submit: 4.172s
(#myDiv).find(span.myClass): 4.484s
IE7 (IE Tester tool):
#content a.submit: 2.046s
a.submit: 1.922s
.submit: 4.969s
(#myDiv).find(span.myClass): 4.562s
IE8 (also IE Tester tool):
#content a.submit: 0.25s
a.submit: 0.219s
.submit: 0.219s
(#myDiv).find(span.myClass): 3.578s
So only using the class name is much slower here.
Looking at my earlier test and this one, a.submit (i.e.
element.myClass) has shown the best overall performance .
Any comments? :)
Cheers
On 2 Jul., 19:36, Karl Swedberg k...@englishrules.com wrote:
On Jul 2, 2009, at 8:45 AM, north wrote:
Hi,
I just tested all my jQuery selectors using the jQuery Tester (http://
jquery.nodnod.net), and the results seem to contradict one thing I
read in a performance article: that you should descend from the
closest parent ID when using classes in your selector (the article
says April 09, so the latest jQuery version was already available).
In my tests, using just the class selector (like span.myClass) was
always fastest (sometimes twice as fast as #myDiv span.myClass), and
this in all browsers I tested, not just the ones supporting
getElementsByClassName.
Maybe descending from the closest parent ID becomes a factor when you
have a lot of elements on you page? Any experiences?
Thanks
If the selectors aren't causing a discernible bottleneck, I wouldn't
worry too much about optimizing them. Just out of curiosity, though,
what happens if you do this:
$('#myDiv').find('span.myClass');
any faster?
Also, which browser are you testing?
--Karl
[jQuery] Re: jQuery selector performance / jQuery Tester
If you're doing this:
test('#content a.submit');
then you shouldn't compare it to this:
test('(#myDiv).find(span.myClass)');
that's apples to oranges. instead, compare it to this:
test('(#content).find(a.submit)');
The reason the other browsers are so much faster than IE 6 and 7with
bare class names is that they have support
for .getElementsByClassName() and .querySelectorAll()
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jul 2, 2009, at 3:53 PM, olsch01 wrote:
Hi Karl,
thanks for your reply.
I used jQuery tester in FF2 + 3, IE6, 7 + 8, Opera 9.64 and I think
also in Safari 4 (on my Win XP machine). The results were are all
kinda similar. Using the class selector was always fastest.
I just ran the following test (choosing jQuery 1.3.2 again):
test('#content a.submit');
test('a.submit');
test('.submit');
test('(#myDiv).find(span.myClass)');
The results in FF3:
#content a.submit: 0.448s
a.submit: 0.344s
.submit: 0.331s
(#myDiv).find(span.myClass): 0.399s
The results for IE are a bit strange and different from my earlier
results.
IE6:
#content a.submit: 1.641s
a.submit: 1.438s
.submit: 4.172s
(#myDiv).find(span.myClass): 4.484s
IE7 (IE Tester tool):
#content a.submit: 2.046s
a.submit: 1.922s
.submit: 4.969s
(#myDiv).find(span.myClass): 4.562s
IE8 (also IE Tester tool):
#content a.submit: 0.25s
a.submit: 0.219s
.submit: 0.219s
(#myDiv).find(span.myClass): 3.578s
So only using the class name is much slower here.
Looking at my earlier test and this one, a.submit (i.e.
element.myClass) has shown the best overall performance .
Any comments? :)
Cheers
On 2 Jul., 19:36, Karl Swedberg k...@englishrules.com wrote:
On Jul 2, 2009, at 8:45 AM, north wrote:
Hi,
I just tested all my jQuery selectors using the jQuery Tester
(http://
jquery.nodnod.net), and the results seem to contradict one thing I
read in a performance article: that you should descend from the
closest parent ID when using classes in your selector (the article
says April 09, so the latest jQuery version was already
available).
In my tests, using just the class selector (like span.myClass) was
always fastest (sometimes twice as fast as #myDiv span.myClass), and
this in all browsers I tested, not just the ones supporting
getElementsByClassName.
Maybe descending from the closest parent ID becomes a factor when
you
have a lot of elements on you page? Any experiences?
Thanks
If the selectors aren't causing a discernible bottleneck, I wouldn't
worry too much about optimizing them. Just out of curiosity, though,
what happens if you do this:
$('#myDiv').find('span.myClass');
any faster?
Also, which browser are you testing?
--Karl
[jQuery] Re: jQuery selector performance / jQuery Tester
You can't measure whether one selector will be faster than another on all
possible pages. All you can measure is which is faster on the page you're
testing.
On a page with only a single a element, an 'a.submit' or even just an 'a'
selector will be faster than '#content a.submit', because it's doing less
work. It will find that a element right away, and since that's the only
a element, you're done right there. Starting the search from #content
makes no difference except to take extra time.
Contrast that with a page with a thousand a elements, where only a few of
those elements (or just one) are inside the #content element. Now using
'#content a.submit' will pay off, because it saves jQuery from having to
scan through all the other a elements - it only has to look at the ones
inside the #content element.
This will vary by browser and by jQuery version, but the point to keep in
mind is that selectors perform differently in very complex pages - and of
course those are the pages where you care the most.
-Mike
From: olsch01
Hi Karl,
thanks for your reply.
I used jQuery tester in FF2 + 3, IE6, 7 + 8, Opera 9.64 and I
think also in Safari 4 (on my Win XP machine). The results
were are all kinda similar. Using the class selector was
always fastest.
I just ran the following test (choosing jQuery 1.3.2 again):
test('#content a.submit');
test('a.submit');
test('.submit');
test('(#myDiv).find(span.myClass)');
The results in FF3:
#content a.submit: 0.448s
a.submit: 0.344s
.submit: 0.331s
(#myDiv).find(span.myClass): 0.399s
The results for IE are a bit strange and different from my
earlier results.
IE6:
#content a.submit: 1.641s
a.submit: 1.438s
.submit: 4.172s
(#myDiv).find(span.myClass): 4.484s
IE7 (IE Tester tool):
#content a.submit: 2.046s
a.submit: 1.922s
.submit: 4.969s
(#myDiv).find(span.myClass): 4.562s
IE8 (also IE Tester tool):
#content a.submit: 0.25s
a.submit: 0.219s
.submit: 0.219s
(#myDiv).find(span.myClass): 3.578s
So only using the class name is much slower here.
Looking at my earlier test and this one, a.submit (i.e.
element.myClass) has shown the best overall performance .
Any comments? :)
Cheers
On 2 Jul., 19:36, Karl Swedberg k...@englishrules.com wrote:
On Jul 2, 2009, at 8:45 AM, north wrote:
Hi,
I just tested all my jQuery selectors using the jQuery Tester
(http:// jquery.nodnod.net), and the results seem to contradict
one thing I read in a performance article: that you
should descend
from the closest parent ID when using classes in your
selector (the
article says April 09, so the latest jQuery version was
already available).
In my tests, using just the class selector (like
span.myClass) was
always fastest (sometimes twice as fast as #myDiv
span.myClass), and
this in all browsers I tested, not just the ones supporting
getElementsByClassName.
Maybe descending from the closest parent ID becomes a factor when
you have a lot of elements on you page? Any experiences?
Thanks
If the selectors aren't causing a discernible bottleneck, I
wouldn't
worry too much about optimizing them. Just out of
curiosity, though,
what happens if you do this:
$('#myDiv').find('span.myClass');
any faster?
Also, which browser are you testing?
--Karl
[jQuery] Re: jquery selector
try this
jQuery(document).ready(function() {
$(.some-class).hover(
function () {
$(this).children('.inside').css
(display, block);
},
function () {
$(this).children('.inside').css
(display, none);
}
);
});
On Jun 25, 7:36 am, vladush vlad...@gmail.com wrote:
hi,
could anybody help me with jquery selectors?
i have this code:
div class=some-class
div class=inside style=display: none;
/div
div class=some-class
div class=inside style=display: none;
/div
...
on hover on each some-class element i want to set display: block;
for div with inside class, but only on div which is child of
actually hovered element.
is it possible do something like this?
jQuery(document).ready(function() {
$(.some-class).hover(
function () {
$(this).$(.inside').css(display,
block);
},
function () {
$(this).$(.inside').css(display,
none);
}
);
});
thank you very much.
[jQuery] Re: JQuery Selector
It's not a selector. Where did you come across that?
The makes it think you want to create an element. It does
nothing more than creating a textNode that contains the string %=x.y
% (and a temporary DIV to hold it).
This $(' ') does the same. The '#' is ignored just as if you used $
('#div/') - that simply creates a DIV.
cheers,
- ricardo
On Mar 13, 3:44 pm, rayglaser raymond.gla...@qpaynet.com wrote:
This form of a selector is undocumented..
('#%=x.y%').length
What does it mean ?
Thanks..
[jQuery] Re: jQuery selector question - Having : in attribute name
You can not have special character in attribute names. (it's not valid markup) Documentation is saying that your should escape VALUE bit if it contains special characters. - Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Wed, Jan 14, 2009 at 2:11 PM, naden n...@naden.de wrote: I'm using jQuery 1.2.6 and having an a element with the attribute ajax:id=46 a href=# ajax:id=46Test Link/a According to http://docs.jquery.com/Selectors/attributeEquals#attributevalue you have to escape : with double backslash like I did. alert( $( a[ajax\\:id='46'] ).attr( 'href' ) ); I tried a lot, but it's not working? Any hint would be appreciated! thanks
[jQuery] Re: jQuery selector question - Having : in attribute name
Your right. The docs said: Note: if you wish to use any of the meta-characters described above as a literal part of a name, you must escape the character with two backslashes (\). For example: #foo\\:bar #foo\\[bar\\] #foo\\.bar and so I did. I used \\: to escape the : or I'm gettin you wrong? On 14 Jan., 12:54, jQuery Lover ilovejqu...@gmail.com wrote: You can not have special character in attribute names. (it's not valid markup) Documentation is saying that your should escape VALUE bit if it contains special characters. - Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Wed, Jan 14, 2009 at 2:11 PM, naden n...@naden.de wrote: I'm using jQuery 1.2.6 and having an a element with the attribute ajax:id=46 a href=# ajax:id=46Test Link/a According tohttp://docs.jquery.com/Selectors/attributeEquals#attributevalue you have to escape : with double backslash like I did. alert( $( a[ajax\\:id='46'] ).attr( 'href' ) ); I tried a lot, but it's not working? Any hint would be appreciated! thanks
[jQuery] Re: jQuery selector question - Having : in attribute name
Slightly :) You can not have special character in your html ATTRIBUTES. You should rename ajax:id to something else. Ex: ajax_id or ajaxId. - Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Wed, Jan 14, 2009 at 5:16 PM, naden n...@naden.de wrote: Your right. The docs said: Note: if you wish to use any of the meta-characters described above as a literal part of a name, you must escape the character with two backslashes (\). For example: #foo\\:bar #foo\\[bar\\] #foo\\.bar and so I did. I used \\: to escape the : or I'm gettin you wrong?
[jQuery] Re: jQuery selector question - Having : in attribute name
That sucks. jQuery has no problem with $( 'a' ).attr( 'ajax:id' ); Therefore it would be nice to use it in the selector too. thanks anyway have to change it. On 14 Jan., 14:05, jQuery Lover ilovejqu...@gmail.com wrote: Slightly :) You can not have special character in your html ATTRIBUTES. You should rename ajax:id to something else. Ex: ajax_id or ajaxId. - Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Wed, Jan 14, 2009 at 5:16 PM, naden n...@naden.de wrote: Your right. The docs said: Note: if you wish to use any of the meta-characters described above as a literal part of a name, you must escape the character with two backslashes (\). For example: #foo\\:bar #foo\\[bar\\] #foo\\.bar and so I did. I used \\: to escape the : or I'm gettin you wrong?
[jQuery] Re: jQuery selector question - Having : in attribute name
Just investigated it: http://dev.jquery.com/ticket/3729 The colon is valid I think, but it's true, there are some restrictions. On Jan 14, 2:27 pm, naden n...@naden.de wrote: That sucks. jQuery has no problem with $( 'a' ).attr( 'ajax:id' ); Therefore it would be nice to use it in the selector too. thanks anyway have to change it. On 14 Jan., 14:05, jQuery Lover ilovejqu...@gmail.com wrote: Slightly :) You can not have special character in your html ATTRIBUTES. You should rename ajax:id to something else. Ex: ajax_id or ajaxId. - Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Wed, Jan 14, 2009 at 5:16 PM, naden n...@naden.de wrote: Your right. The docs said: Note: if you wish to use any of the meta-characters described above as a literal part of a name, you must escape the character with two backslashes (\). For example: #foo\\:bar #foo\\[bar\\] #foo\\.bar and so I did. I used \\: to escape the : or I'm gettin you wrong?
[jQuery] Re: jQuery selector fails when in FOR loop
Can you show what your for loop currently looks like?
Answer for question #2: using the .each method, a paramenter is
passed to the anonymous function that is the current 0-based index of
the item in the collection
without seeing your code, i will take a guess at helping you though
$(div[id^='defName']).bind(click, function() {
var id = $(this).id.substr(7);
$(#defValue + id).fadeIn(normal);
});
On Dec 12, 3:25 pm, raskren rask...@gmail.com wrote:
I have a set of divs that are created using jQuery. My script sets
an ID for each div and appends a counter variable to this ID. For
example, defName0, defName1, defName2, etc.
Within the same for loop that generates the IDs I would also like to
assign a jQuery function to the header. However, it seems that I
cannot select ANY jQuery objects from within a FOR loop.
In the sample code below I have hardcoded the ID (rather than using
#defName+[i] which doesn't work either). If I stick these two lines
in a FOR loop the function is not bound to the object and does not
fire on click (even though it doesn't reference the counter variable
used in the For loop). If I pull this out of the loop it works as
expected.
$(#defName0).bind(click, function() {
$(#defValue0).fadeIn(normal);
My questions are twofold:
1. Obviously, how do I get this to work in a For loop, if at all?
2. What is the proper syntax to add a counter variable to a jQuery
selector in a for loop? Is it #defName+[i], defName+[i], or what?
Thanks.
[jQuery] Re: JQuery selector
Try: $(.u:last li:last).addClass(last); On 28 Okt., 13:07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: JQuery selector
Because you forgot to close the de first ul element. Mauricio -Mensagem Original- De: [EMAIL PROTECTED] Para: jQuery (English) jquery-en@googlegroups.com Enviada em: terça-feira, 28 de outubro de 2008 10:07 Assunto: [jQuery] JQuery selector Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: JQuery selector
$(.u:last li:last).addClass(last); Close. $(ul.u li:last-child).addClass(last); You may want to move that child ul inside an li - it's not proper HTML to put a UL inside a UL. --John On 28 Okt., 13:07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: JQuery selector
It's preferable correct the invalid markup and use the selector you have chose or ( $(.u li:last-child). E F selects all elements F that are descendants of E element. E F selects all elements F that are children (direct descendants) of E element. Mantra: Validate! Validate! and Validate! http://validator.w3.org/ You may want to move that child ul inside an li - it's not proper HTML to put a UL inside a UL. --John On 28 Okt., 13:07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: JQuery Selector and Java Script Variable
I just tried dropped in some vanilla XML and it saves and renders fine: http://jsbin.com/uwedo/edit I cleared out the JavaScript tab, and just entered plain old XML in the HTML tab - the saved output is just XML: http://jsbin.com/uwedo/ yeah! I couldn't manage to put xml in jsbin. I followed the ajax video without no success. Any view where i pasted the xml (JS or HTML views) it was outputted without tags. The only manner i found was to paste html encoded caracters in the html view. So that the output was fine (at screen) ( I do paste that in html view: lt;xmlgt; lt;set id=quot;textfieldquot;gt;value for test 1lt;/setgt; lt;/ xmlgt; ) Is there a simple way to use xml at jsbin ? like you do with json in the ajax video ? Thanx for the jsbin app, it kills all !
[jQuery] Re: JQuery Selector and Java Script Variable
You can use this syntax:
if ( $('#elementToBeUpdated').is('input,textarea') ) {
// use val();
} else {
// use text();
}
or you can take advantage of the empty return object (only one will
execute):
$('#element').filter('input,textarea').val(new);
$('#element').not('input,textarea').text(new);
or better yet, elements usually don't have a value attribute:
(this.value) ? $(this).val(new) : $(this).text(new);
- ricardo
On Oct 19, 11:30 am, RotinPain [EMAIL PROTECTED] wrote:
@ Balazs Endresz:
You're right, and Ricardobeat has given the good answer ;)
Even if i'm working with Firebug I didn't notice this behavior between
value and text.
@Remy:
yeah! I couldn't manage to put xml in jsbin. I followed the ajax video
without no success.
Any view where i pasted the xml (JS or HTML views) it was outputted
without tags. The only manner i found was to paste html encoded
caracters in the html view. So that the output was fine (at screen)
( I do paste that in html view: lt;xmlgt; lt;set
id=quot;textfieldquot;gt;value for test 1lt;/setgt; lt;/
xmlgt; )
Is there a simple way to use xml at jsbin ? like you do with json in
the ajax video ? Thanx for the jsbin app, it kills all !
@ Ricardo:
val() is working fine in this case, thanx. Nice analysis of the FF
behavior with textarea text/value attributes ;)
what i didn't mention is that the element to be updated could be any
element in the page (textarea, div or p ... )
The first code I wrote in dev was including a test case for the
element tagname before to update it, and i was right then! (But when i
saw that text() was working with textarea too (mainly in IE), i
deleted this test case using text() for updating any element content).
Here's the test case I was using :
var viewer = $([id=' + update[0] + ']);
var viewertag = viewer.attr(tagName).toLowerCase()
if (viewertag == textarea || viewertag == input) {
viewer.val( update[1] );//input detected}
else {
viewer.text( update[1] );//other than inputs
}
Would there be a method to update any element without any test case ?
Thank you all for you help. I now understand better why it does not
always work in FF (IE and SAFARI 3(win32) where working fine with the
code) !
[jQuery] Re: JQuery Selector and Java Script Variable
@ricardobeat: Great! thank you for your help. I see that there are plenty of manners that can be used to retrieve the type of an element, now it's to choose the good one ;) . I'll use the ternary one for my code but I will also keep in mind the other functions you gave here for using them in my next coding @Remy: I did that already! ... but when i saw that the ouput was without any tag (stripped), i told myself that the the code won't have been recognized as xml but as text only. If i understand well, the script will parse the html tab and not the output tab ? Again thousand of thanks to all of you here ! you saved me from a violent headache !!
[jQuery] Re: JQuery Selector and Java Script Variable
@ Balazs Endresz:
You're right, and Ricardobeat has given the good answer ;)
Even if i'm working with Firebug I didn't notice this behavior between
value and text.
@Remy:
yeah! I couldn't manage to put xml in jsbin. I followed the ajax video
without no success.
Any view where i pasted the xml (JS or HTML views) it was outputted
without tags. The only manner i found was to paste html encoded
caracters in the html view. So that the output was fine (at screen)
( I do paste that in html view: lt;xmlgt; lt;set
id=quot;textfieldquot;gt;value for test 1lt;/setgt; lt;/
xmlgt; )
Is there a simple way to use xml at jsbin ? like you do with json in
the ajax video ? Thanx for the jsbin app, it kills all !
@ Ricardo:
val() is working fine in this case, thanx. Nice analysis of the FF
behavior with textarea text/value attributes ;)
what i didn't mention is that the element to be updated could be any
element in the page (textarea, div or p ... )
The first code I wrote in dev was including a test case for the
element tagname before to update it, and i was right then! (But when i
saw that text() was working with textarea too (mainly in IE), i
deleted this test case using text() for updating any element content).
Here's the test case I was using :
var viewer = $([id=' + update[0] + ']);
var viewertag = viewer.attr(tagName).toLowerCase()
if (viewertag == textarea || viewertag == input) {
viewer.val( update[1] );//input detected
}
else {
viewer.text( update[1] );//other than inputs
}
Would there be a method to update any element without any test case ?
Thank you all for you help. I now understand better why it does not
always work in FF (IE and SAFARI 3(win32) where working fine with the
code) !
[jQuery] Re: JQuery Selector and Java Script Variable
I met a similar issue, but i can determine it happens only with Firefox (3.0.3). The variable selector seems to be the problem. I explained the whole thing here:http://jsbin.com/aciwi in short, $([id=' + variableId + ']).text( variableValue ); won't always work with FF (it works in first steps) but document.getElementById( variableId ).value = variableValue; will always work I can't succes in making my code working with jsbin (i tried several ways to) because the code use ajax with xml and I can't make the relation between them. You can view the jquery code here: http://jsbin.com/aciwi That should load a sample xml here : http://jsbin.com/ebupo But it does not Anyway, i posted the same code here at my own ftp: jquery/html page: http://rotinpain.ifrance.com/tests/test4xml.html xml data source: http://rotinpain.ifrance.com/tests/test4xml.xml Let me know if you see something that i didn't. i'm fairly new to jquery but i think the code is ok.
[jQuery] Re: JQuery Selector and Java Script Variable
In your case the proplem is that you're using .text() instead of .value() on the textarea. The strangest thing is why does .text() even work unless you change the content? It's quite misleading because it shouldn't work on input elements: http://docs.jquery.com/Attributes/text On Oct 18, 6:09 pm, RotinPain [EMAIL PROTECTED] wrote: I met a similar issue, but i can determine it happens only with Firefox (3.0.3). The variable selector seems to be the problem. I explained the whole thing here:http://jsbin.com/aciwi in short, $([id=' + variableId + ']).text( variableValue ); won't always work with FF (it works in first steps) but document.getElementById( variableId ).value = variableValue; will always work I can't succes in making my code working with jsbin (i tried several ways to) because the code use ajax with xml and I can't make the relation between them. You can view the jquery code here:http://jsbin.com/aciwi That should load a sample xml here :http://jsbin.com/ebupo But it does not Anyway, i posted the same code here at my own ftp: jquery/html page:http://rotinpain.ifrance.com/tests/test4xml.html xml data source:http://rotinpain.ifrance.com/tests/test4xml.xml Let me know if you see something that i didn't. i'm fairly new to jquery but i think the code is ok.
[jQuery] Re: JQuery Selector and Java Script Variable
Slightly aside to your actual problem - I looked at the jsbin dump you did and the source XML (http://jsbin.com/ebupo ) and noticed the XML tags had been escaped - so I've gone in to the database and updated it manually so your test page now works (or works in that it demonstrates the problem). Cheers, Remy (author of JS Bin...which is why I could edit and fix the source for you!)
[jQuery] Re: JQuery Selector and Java Script Variable
At first, the textarea has 'text content' (inside the tags), and it's shown inside. When you click the buttons, it updates this text content. *But*, when you edit it manually, you are updating the textarea's VALUE attribute, not the the text inside. When you have both, the value attribute supersedes the text content. If you inspect the textarea using Firebug you will see that the text content is still being changed, it's just not being shown. Changing the function to use val() instead has it working perfectly. http://jsbin.com/ozoqi - ricardo On Oct 18, 4:10 pm, Balazs Endresz [EMAIL PROTECTED] wrote: In your case the proplem is that you're using .text() instead of .value() on the textarea. The strangest thing is why does .text() even work unless you change the content? It's quite misleading because it shouldn't work on input elements:http://docs.jquery.com/Attributes/text On Oct 18, 6:09 pm, RotinPain [EMAIL PROTECTED] wrote: I met a similar issue, but i can determine it happens only with Firefox (3.0.3). The variable selector seems to be the problem. I explained the whole thing here:http://jsbin.com/aciwi in short, $([id=' + variableId + ']).text( variableValue ); won't always work with FF (it works in first steps) but document.getElementById( variableId ).value = variableValue; will always work I can't succes in making my code working with jsbin (i tried several ways to) because the code use ajax with xml and I can't make the relation between them. You can view the jquery code here:http://jsbin.com/aciwi That should load a sample xml here :http://jsbin.com/ebupo But it does not Anyway, i posted the same code here at my own ftp: jquery/html page:http://rotinpain.ifrance.com/tests/test4xml.html xml data source:http://rotinpain.ifrance.com/tests/test4xml.xml Let me know if you see something that i didn't. i'm fairly new to jquery but i think the code is ok.
[jQuery] Re: JQuery Selector and Java Script Variable
That looks like the proper syntax to get your desired selector. Are you
getting an error or unexpected results?
-- Josh
- Original Message -
From: Shadi Almosri [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Monday, October 13, 2008 9:32 AM
Subject: [jQuery] JQuery Selector and Java Script Variable
Hiya,
I've not been able to find an answer to this online! can someone point
out the correct syntax for this:
var myRel = $(this).attr(rel);
var largePath = $('a[rel*=' + myRel +']').attr(href);
Basicly the myRel gets set correctly, but how do i use the javascript
variable as part of the jquery selector so that i can get a selector
that looks like:
(assuming myRel was 5)...
var largePath = $('a[rel*=5]').attr(href);
Thanks in advance!
Shadi
[jQuery] Re: jQuery selector that matches dd's elements
I doubt that will work, since all of the dd elements are siblings of
the clicked dt.
Mauricio, Take a look at the nextUntil plugin. That should do what
you're looking for:
http://docs.jquery.com/JQuery_1.2_Roadmap#.nextUntil.28.29_.2F_.prevUntil.28.29
After including the plugin, you can do this:
$('dt').click(function() {
$(this).nextUntil('dt').doSomething();
});
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 10, 2008, at 2:56 PM, [EMAIL PROTECTED] wrote:
This should work for you:
$('dt').click(function() {
$(this).nextAll('dd').doSomething()
});
[jQuery] Re: jQuery selector that matches dd's elements [SOLVED]
@Paperboy: Sorry, both solutions you pointed out selects ALL dd after the dt clicked. Tks! @Karl: The plugin you pointed out do the job. Tks! Maurício
[jQuery] Re: jQuery selector that matches dd's elements [SOLVED]
Already solved but I thought it would be fun to solve it by hand :D
jQuery.fn.getDDs = function(){
var next = $(this[this.length-1]).next();
if(next.is('dd')){
return this.add(next).getDDs();
} else { return this.not('dt'); };
};
this is a bit faster:
jQuery.fn.getDDs = function(){
var nextDT;
this.siblings('dd').each(function(i){
if( $(this).next().is('dt') ) { nextDT=i+1; return false };
});
return this.nextAll('dd:lt('+nextDT+')');
};
$('dt:eq(0)').getDDs();
- ricardo
On Oct 13, 5:59 pm, Mauricio \(Maujor\) Samy Silva
[EMAIL PROTECTED] wrote:
@Paperboy:
Sorry, both solutions you pointed out selects ALL dd after the dt clicked.
Tks!
@Karl:
The plugin you pointed out do the job. Tks!
Maurício
[jQuery] Re: jQuery selector that matches dd's elements
You could use something like this:
$('dt:eq(0)').nextAll('dd').doSomething();
$('dt:eq(1)').nextAll('dd').doSomething();
$('dt:eq(2)').nextAll('dd').doSomething();
$('dt:eq(3)').nextAll('dd').doSomething();
$('dt:eq(4)').nextAll('dd').doSomething(); // and so on...
[jQuery] Re: jQuery selector that matches dd's elements
This should work for you:
$('dt').click(function() {
$(this).nextAll('dd').doSomething()
});
[jQuery] Re: jQuery selector works with FF and not on IE
you can do $(':input:visible') instead.
i've found that :not can be picky at times. could be totally imagined
on my part, but i usually use $.not() instead, despite the extra
traversal of the nodeset involved.
-micah
On Aug 29, 10:19 am, anuradha k [EMAIL PROTECTED]
wrote:
Hi All
I am trying to do a simple jQuery, where in the selector fetches me
all the empty fields in the form page.
var inputFieldsArray = $(:input:not(:hidden)); // to get the fields
that arent hidden
for(var i=0; iinputFieldsArray.size(); i++){
var trClass = $
(inputFieldsArray[i]).parents(tr:first).attr(class);
if (trClass == wcgRequired wcgErrorRow) { // if this value then
set wcgFieldtype as required
if ($(inputFieldsArray[i]).attr(class) != 'wcgFieldNotRequired') {
$(inputFieldsArray[i]).attr(wcgFieldType, required);
if (($(inputFieldsArray[i]).attr(value) == undefined)||($
(inputFieldsArray[i]).attr(value) == null)||($
(inputFieldsArray[i]).attr(value).trim().length == 0) ) // if this
is true then set wcgFieldState = empty
{
$(inputFieldsArray[i]).attr(wcgFieldState, empty);
var requiredButEmpty = $(:input[wcgFieldState='empty']);
alert(requiredButEmpty
+requiredButEmpty.length.toString()); //
this value is always 0 in case of IE but FF fetches me the right value
}
I have included the inline comments for better understanding. I have
been struggling with this for almost a week and I am unable to find
the root cause
Any help in this regard is greatly appreciated
thank you
Anuradha K
[jQuery] Re: JQuery Selector
Ah, sorry. I was looking at it wrt the literal elements, not as the representation of an external structure. Apologies. On Apr 10, 3:52 am, JB [EMAIL PROTECTED] wrote: A section is just and idea, here it is represented by 'sectionstart' divs and 'sectionend' divs, everything within a section should be indented progressively based on how deep it is (infinitely deep is possible). On Apr 9, 6:53 pm, Wizzud [EMAIL PROTECTED] wrote: Actually, no I can't see. Every DIV with #survey contains just one text node - nothing else. On Apr 9, 10:27 pm, JB [EMAIL PROTECTED] wrote: I've got the following html div id=survey br / div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionend end /div div class=sectionend end /div /div As you can see there are section starts section ends that can contain other starts and ends. I want to leave the html as is, but visually give some left padding/margin based on how 'deep' the section is. I've been trying to get this via jquery but can't seem to get it. Say I'm one level deep I want margin-left:20px, if I'm 2 levels deep I want margin-left:40px and so on... Thanks for the help.- Hide quoted text - - Show quoted text -
[jQuery] Re: JQuery Selector
Actually, no I can't see. Every DIV with #survey contains just one text node - nothing else. On Apr 9, 10:27 pm, JB [EMAIL PROTECTED] wrote: I've got the following html div id=survey br / div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionend end /div div class=sectionend end /div /div As you can see there are section starts section ends that can contain other starts and ends. I want to leave the html as is, but visually give some left padding/margin based on how 'deep' the section is. I've been trying to get this via jquery but can't seem to get it. Say I'm one level deep I want margin-left:20px, if I'm 2 levels deep I want margin-left:40px and so on... Thanks for the help.
[jQuery] Re: JQuery Selector
This should be quite easy - for each section start you add some
padding, for each section end you remove it:
var sectionPadding = 0;
var sectionIndent = 10;
$('#survey div').each(function(){
if( $(this).is('.sectionend') ) {
sectionPadding -= sectionIndent;
}
$(this).css('margin-left', sectionPadding + 'px');
if( $(this).is('.sectionstart') ) {
sectionPadding += sectionIndent;
}
});
Works with the html supplied.
On Apr 10, 9:27 am, JB [EMAIL PROTECTED] wrote:
I've got the following html
div id=survey
br /
div class=sectionstart
start
/div
div class=sectionstart
start
/div
div class=sectionend
end
/div
div class=sectionstart
start
/div
div class=sectionend
end
/div
div class=sectionstart
start
/div
div class=sectionstart
start
/div
div class=sectionend
end
/div
div class=sectionend
end
/div
div class=sectionend
end
/div
/div
As you can see there are section starts section ends that can
contain other starts and ends. I want to leave the html as is, but
visually give some left padding/margin based on how 'deep' the section
is. I've been trying to get this via jquery but can't seem to get
it. Say I'm one level deep I want margin-left:20px, if I'm 2 levels
deep I want margin-left:40px and so on...
Thanks for the help.
[jQuery] Re: JQuery Selector
A section is just and idea, here it is represented by 'sectionstart' divs and 'sectionend' divs, everything within a section should be indented progressively based on how deep it is (infinitely deep is possible). On Apr 9, 6:53 pm, Wizzud [EMAIL PROTECTED] wrote: Actually, no I can't see. Every DIV with #survey contains just one text node - nothing else. On Apr 9, 10:27 pm, JB [EMAIL PROTECTED] wrote: I've got the following html div id=survey br / div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionend end /div div class=sectionend end /div /div As you can see there are section starts section ends that can contain other starts and ends. I want to leave the html as is, but visually give some left padding/margin based on how 'deep' the section is. I've been trying to get this via jquery but can't seem to get it. Say I'm one level deep I want margin-left:20px, if I'm 2 levels deep I want margin-left:40px and so on... Thanks for the help.- Hide quoted text - - Show quoted text -
[jQuery] Re: Jquery Selector even and first child (nested tables striping)
Use the child combinator to select just the children of a certain
element. In your case, assuming you have an tbody element:
$('table.basic tbody tr:even').addClass('even');
--Klaus
On Mar 31, 8:45 pm, rsmolkin [EMAIL PROTECTED] wrote:
Hi,
I've ran into a little problem. I'm using the code below to do
alternate row striping on a table.
$('table.basic tr:even').addClass('even');
The problem is, one of the cells of this table contains another
(nested) table. So the tr:even selector is getting messet up, and is
applying the row color to the nested table and then skips the actual
next row in the table.
Is there any way to do :even only on first level tr elements? I tried
doing
$('table.basic tr:first-child tr:even').addClass('even');
But that doesn't work. Does anyone know how to do this right?
Thanks,
-Roman
[jQuery] Re: Jquery Selector even and first child (nested tables striping)
Ok, found a solution if anyone else is searching!
$('table.basic tr:nth-child(even)').addClass('even');
-Roman
On Mar 31, 2:45 pm, rsmolkin [EMAIL PROTECTED] wrote:
Hi,
I've ran into a little problem. I'm using the code below to do
alternate row striping on a table.
$('table.basic tr:even').addClass('even');
The problem is, one of the cells of this table contains another
(nested) table. So the tr:even selector is getting messet up, and is
applying the row color to the nested table and then skips the actual
next row in the table.
Is there any way to do :even only on first level tr elements? I tried
doing
$('table.basic tr:first-child tr:even').addClass('even');
But that doesn't work. Does anyone know how to do this right?
Thanks,
-Roman
[jQuery] Re: JQUERY SELECTOR based on image path
Thanks Aaron and Scott - that works perfectly.
And Aaron, thanks for the link - I had looked at that area but didn't
connect the dots. This opens up a lot for me.
thanks again
George
On May 3, 3:01 pm, millionmonkey [EMAIL PROTECTED] wrote:
Hi folks,
This works - but I was wondering if there is a cleaner more jquery way
to do the same thing? Perhpas there is a selector that I missed in
the docs?
$(function() {
s = $(img).eq(0).attr(src)
if (s.search(images/m)0) {
$(img).eq(0).addClass(newimage)
}
});
tia,
George
