[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] jQuery Selector Help
Long time listner, first time caller ...
I am struggling with a selctor and am hopeful someone can help me see
the forest through the trees. I am using a WordPress plugin which
generates the following HTML:
td class=day-with-date
span class=weekend26/span
span class=eventbr /
*
span class=calnk nowrap=nowrap
a href=# style=Christmas Break
span style=
div class=event-titleChristmas Break/div
div class=event-title-break/div/span/a/spanbr /
*
span class=calnk nowrap=nowrap
a href=http://localhost/?p=104; style=
Futsal Training
span style=
div class=event-titleFutsal Training/div
div class=event-title-break/divstrongTime:/strong 1:30
pmbr /
div class=event-content-break/div
Futsal Training at NetSports
/span
/a
/span
/span
/td
I want to strip the asterisk characters (*) from the HTML. I have
been able to tweak a few things but I am struggling with a selctor
which would allow me to eliminate the asterisk. Any help or
suggestions would be approeciated. I was trying to do this but
innerHTML returns undefined and I am not sure why.
jQuery('span.even br').each(function() {
html = this.innerHTML ;
// Some manipulation goes here
jQuery(this).html(html) ;
}
I am by no means a jQuery guru so I am sure I am missing something
obvious.
Thanks,
Mike
Re: [jQuery] jQuery Selector Help
I would suggest you to wrap the sections within * into a div and select that
div.
Thanks Regards,
Dhruva Sagar.
On Tue, Dec 22, 2009 at 6:29 PM, Mike Walsh mike_wa...@mindspring.comwrote:
Long time listner, first time caller ...
I am struggling with a selctor and am hopeful someone can help me see
the forest through the trees. I am using a WordPress plugin which
generates the following HTML:
td class=day-with-date
span class=weekend26/span
span class=eventbr /
*
span class=calnk nowrap=nowrap
a href=# style=Christmas Break
span style=
div class=event-titleChristmas Break/div
div class=event-title-break/div/span/a/spanbr /
*
span class=calnk nowrap=nowrap
a href=http://localhost/?p=104; style=
Futsal Training
span style=
div class=event-titleFutsal Training/div
div class=event-title-break/divstrongTime:/strong 1:30
pmbr /
div class=event-content-break/div
Futsal Training at NetSports
/span
/a
/span
/span
/td
I want to strip the asterisk characters (*) from the HTML. I have
been able to tweak a few things but I am struggling with a selctor
which would allow me to eliminate the asterisk. Any help or
suggestions would be approeciated. I was trying to do this but
innerHTML returns undefined and I am not sure why.
jQuery('span.even br').each(function() {
html = this.innerHTML ;
// Some manipulation goes here
jQuery(this).html(html) ;
}
I am by no means a jQuery guru so I am sure I am missing something
obvious.
Thanks,
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] Selector and fadeIn/Out problem! (need help)
Hi people
I need help with my navigation-system. My currently situation is the
following:
I've got a closer on my website, a button, that allows a close-
function to the upper div-element, in which the closer seats. One
level higher. It's the only parent-element with a closer on the
website.
My code:
$('.closer').click(function () {
$('div:has(.closer)').fadeOut(2000);
});
It's really simple. Every div-element, that contains the closer-class,
in my case all of them, will have a fadeOut. And it works great. By
click on the closer-class the upper (...higher) parent-div will be
close.
My problem. I've got an other function, that allows to fadeIn the same
div:
$('.page1').click(function () {
$('#content, #philosopie, #kontakt,
#curriculumvitae').fadeOut
(2000);
$('#ueberuns').fadeIn(2000);
});
The ID = #ueberuns is the same div as the upper one in the instruction
above! But it won't work well. Why? The meaning goes to the same Div?
I can't understand it.
A solution would be:
$('#ueberuns').fadeIn(2000); change to =
$('div:has(.closer)').fadeIn(2000);
It would work great, BUT (!) I've got other divs, layered one upon the
other, which are also got a fadeIn and the user will see all layered.
Terrible! :-)
My first solution was quiet simple. I had for every closer a
seperate function, that response to seperate IDs etc. It works fine.
Why not? But I'm interested in a minimal code-use. ;-)
My first idea was, to select by jquery-selectors the upper element,
like this:
...$('.closer div').fadeOut(2000); it means in my mind =
the parent-element of .closer(class), in this case a div-element,
would get fade out. It doesn't work and I'm studying the selectors
better. ;-) Any Idea for that? Has got jquery any selector like this?
(by the way)
Any Ideas for my problem? My idea is further to save code. It means:
one close-function for each of the layered divs and not seperate
functions, that blow up my code gigantically.
regards
[jQuery] selector canbe chain.
THIS WORK: $(li:lt(8):gt(3)：even); but this did not: $(ul:has(li：eq(3)));
Re: [jQuery] Selector fails and works
I believe this is the problem:
input[type=radio][checked=true]
The correct value for the checked attribute is checked, not true
(don't ask me why; I think it's a stinker), so jQuery comes up
empty-handed.
Whereas the other way you're approaching this:
if (this.checked)
... works because you're testing for a (boolean) property that is
assigned by jQuery *after* it has used your more general selector to
create a list of objects.
A simpler way to approach this would be to use some of jQuery's
built-in selector goodness:
$('#selected_courses .course input:radio:checked')
However, note that you drop '.course' from this if there are never any
other radio buttons within #selected_courses but outside of a .course
div.
On Mon, Dec 7, 2009 at 4:40 PM, Beardsley Ruml b...@ruml.com wrote:
Sorry that this take a while to demonstrate but it's a complete puzzle (to
me)!
I would like to determine whether there are any checked radio buttons within
the
div selected_courses in the following HTML:
div id=selected_courses
div class=course
input type=radio name=1st .. /
[ 5 more radio buttons]
/div
[ 2 more courses ]
/div
When the code below is executed, there are 3 selected courses; since
each course has six radio buttons, there are 18 radio buttons. When I
add the further qualification to select only the checked radio buttons,
the reponse is zero buttons (although there are in fact 3 checked buttons).
However, if I approach the search in another more roundabout way -- by
examining
each of the radio buttons in turn to determine how many are checked, the
answer
is the correct one: 3 (one within each course).
Notice that within the following each loop, I look among the
selected_courses
for an input element with a specified name which is checked and *that*
doubly
conditioned selector works as expected; that is, the if statement is
executed.
So why does the double condition on the input selector fail the first time
and succeed the second time
Perhaps relevant:
When I replace:
$('#selected_courses .course input[type=radio][checked=true]')
with
$sel_courses.find('input[type=radio][checked=true]')
the selection works. Is there some difference between three levels of
selection criteria without an initial jQuery object and using find() to
apply a single criterion to an existing jQuery object?
Code:
if (ui.panel.id == final_ordered_list) {
console.log(Clicked on Final Ordered List tab:);
var $sel_courses = $(#selected_courses .course);
console.log(Have + $sel_courses.length + selected courses.);
var $radio_buttons = $('#selected_courses .course input[type=radio]');
console.log(Have + $radio_buttons.length + radio buttons.);
var $chked_radio_buttons = $('#selected_courses .course
input[type=radio][checked=true]');
console.log(Got + $chked_radio_buttons.length + straight checked radio
buttons.);
var checked_radio_buttons = 0;
$radio_buttons.each(function() { if (this.checked) checked_radio_buttons +=
1; });
console.log(Got + checked_radio_buttons + roundabout checked radio
buttons.);
if (checked_radio_buttons 0) {
console.log( + $sel_courses.length + selected courses);
console.log( + checked_radio_buttons + checked radio buttons);
$.each([1st,2nd,3rd,4th,5th,6th], function(index,
curr_ordinal) {
// if there is a course with the curr_ordinal radio button checked
// (can only be one), then copy to Final Ordered List;
var $checked_radio_button = $sel_courses.find('input[name=' +
curr_ordinal + '][checked=true]')
if ($checked_radio_button.length 0) {
// do something;
}
});
});
});
Console output:
==
Clicked on Final Ordered List tab:
Have 3 selected courses.
Have 18 radio buttons.
Got 0 straight checked radio buttons.
Got 3 roundabout checked radio buttons.
3 selected courses
3 checked radio buttons
Many thanks for any insights into what's happening!
B Ruml
[jQuery] Selector fails and works
Sorry that this take a while to demonstrate but it's a complete puzzle
(to me)!
I would like to determine whether there are any checked radio buttons
within the
div selected_courses in the following HTML:
div id=selected_courses
div class=course
input type=radio name=1st .. /
[ 5 more radio buttons]
/div
[ 2 more courses ]
/div
When the code below is executed, there are 3 selected courses; since
each course has six radio buttons, there are 18 radio buttons. When I
add the further qualification to select only the checked radio buttons,
the reponse is zero buttons (although there are in fact 3 checked
buttons).
However, if I approach the search in another more roundabout way -- by
examining
each of the radio buttons in turn to determine how many are checked,
the answer
is the correct one: 3 (one within each course).
Notice that within the following each loop, I look among the
selected_courses
for an input element with a specified name which is checked and *that*
doubly
conditioned selector works as expected; that is, the if statement is
executed.
So why does the double condition on the input selector fail the
first time
and succeed the second time
Perhaps relevant:
When I replace:
$('#selected_courses .course input[type=radio][checked=true]')
with
$sel_courses.find('input[type=radio][checked=true]')
the selection works. Is there some difference between three levels of
selection criteria without an initial jQuery object and using find() to
apply a single criterion to an existing jQuery object?
Code:
if (ui.panel.id == final_ordered_list) {
console.log(Clicked on Final Ordered List tab:);
var $sel_courses = $(#selected_courses .course);
console.log(Have + $sel_courses.length + selected courses.);
var $radio_buttons = $('#selected_courses .course
input[type=radio]');
console.log(Have + $radio_buttons.length + radio buttons.);
var $chked_radio_buttons = $('#selected_courses .course
input[type=radio][checked=true]');
console.log(Got + $chked_radio_buttons.length + straight
checked radio buttons.);
var checked_radio_buttons = 0;
$radio_buttons.each(function() { if (this.checked)
checked_radio_buttons += 1; });
console.log(Got + checked_radio_buttons + roundabout checked
radio buttons.);
if (checked_radio_buttons 0) {
console.log( + $sel_courses.length + selected courses);
console.log( + checked_radio_buttons + checked radio
buttons);
$.each([1st,2nd,3rd,4th,5th,6th], function(index,
curr_ordinal) {
// if there is a course with the curr_ordinal radio button
checked
// (can only be one), then copy to Final Ordered List;
var $checked_radio_button = $sel_courses.find('input[name=' +
curr_ordinal + '][checked=true]')
if ($checked_radio_button.length 0) {
// do something;
}
});
});
});
Console output:
==
Clicked on Final Ordered List tab:
Have 3 selected courses.
Have 18 radio buttons.
Got 0 straight checked radio buttons.
Got 3 roundabout checked radio buttons.
3 selected courses
3 checked radio buttons
Many thanks for any insights into what's happening!
B Ruml
[jQuery] Selector issue
Well i'm in trouble.
Following code does not trigger :
Code: Select all
$(#cat_list div).click(function()
{ alert(Bye bye!);;
});
neither
Code: Select all
$(#cat_list ~ div).click(function()
{ alert(Bye bye!);;
});
or
Code: Select all
$(#cat_list *).click(function()
{ alert(Bye bye!);;
});
Altough this works :
Code: Select all
$(#cat_list).click(function()
{ alert(Bye bye!);;
});
HTML code looks like :
div id=cat_list
div id=39a/div
div id=40b/div
...
/div
Any idea ?
thanks
Re: [jQuery] Selector Help
That's a nice solution.
Let's make it easier to follow with some indentation:
$('a.filter').click(function() {
$(this)
.closest('ul')
.children()
.removeClass('active')
.end()
.end()
.closest('li')
.addClass('active');
});
The basic indentation rules we're following here are:
* Put each method call on a line by itself, with the . at the beginning of
the line. (You can put more than one call on the same line, but only when
they don't change the selection.)
* Where a method creates the jQuery object or changes its element selection,
indent the next line.
* Where .end() is called, un-indent that line.
You could even go overboard on readability and add the missing .end() calls
at the very end:
$('a.filter').click(function() {
$(this)
.closest('ul')
.children()
.removeClass('active')
.end()
.end()
.closest('li')
.addClass('active')
.end()
.end();
});
Now this looks a lot like the way we indent blocks in JavaScript and other
languages. Each .closest() or .children() call is matched up with its own
.end() call - as is the initial $(this) - and the indentation indicates the
code affected by each of those calls.
It's more customary to omit those trailing.end() calls, but with or without
them, the indentation is a great help in visualizing the structure of a
complex chain.
-Mike
On Sun, Nov 29, 2009 at 11:39 PM, Michel Belleville
michel.bellevi...@gmail.com wrote:
Even better :
$('a.filter').click(function() {
$(this).closest('ul').children().removeClass('active').end().end().closest('li').addClass('active');
});
Michel Belleville
2009/11/29 Mauricio (Maujor) Samy Silva css.mau...@gmail.com
Try this:
$('a.filter').click(function(){
$(this).parent().siblings('li').removeClass('active');
$(this).parent('li').addClass('active');
});
Maurício
-Mensagem Original-
*De:* Charlie charlie...@gmail.com
*Para:* jquery-en@googlegroups.com
*Enviada em:* domingo, 29 de novembro de 2009 03:56
*Assunto:* Re: [jQuery] Selector Help
...
Dave Maharaj :: WidePixels.com wrote:
How would I go about adding class to the li in this set up?
lia href=# class=filterspanall/span/a/li
lia href=# class=filterspansome/span/a/li
lia href=# class=filterspannone/span/a/li
...
RE: [jQuery] Selector Help
Good, practical formatting for understand the chain
From: Michael Geary [mailto:m...@mg.to]
Sent: Monday, November 30, 2009 3:28 AM
To: jquery-en@googlegroups.com
Subject: Re: [jQuery] Selector Help
That's a nice solution.
Let's make it easier to follow with some indentation:
$('a.filter').click(function() {
$(this)
.closest('ul')
.children()
.removeClass('active')
.end()
.end()
.closest('li')
.addClass('active');
});
The basic indentation rules we're following here are:
* Put each method call on a line by itself, with the . at the beginning of
the line. (You can put more than one call on the same line, but only when
they don't change the selection.)
* Where a method creates the jQuery object or changes its element selection,
indent the next line.
* Where .end() is called, un-indent that line.
You could even go overboard on readability and add the missing .end() calls
at the very end:
$('a.filter').click(function() {
$(this)
.closest('ul')
.children()
.removeClass('active')
.end()
.end()
.closest('li')
.addClass('active')
.end()
.end();
});
Now this looks a lot like the way we indent blocks in JavaScript and other
languages. Each .closest() or .children() call is matched up with its own
.end() call - as is the initial $(this) - and the indentation indicates the
code affected by each of those calls.
It's more customary to omit those trailing.end() calls, but with or without
them, the indentation is a great help in visualizing the structure of a
complex chain.
-Mike
On Sun, Nov 29, 2009 at 11:39 PM, Michel Belleville
michel.bellevi...@gmail.com wrote:
Even better :
$('a.filter').click(function() {
$(this).closest('ul').children().removeClass('active').end().end().closest('
li').addClass('active');
});
Michel Belleville
2009/11/29 Mauricio (Maujor) Samy Silva css.mau...@gmail.com
Try this:
$('a.filter').click(function(){
$(this).parent().siblings('li').removeClass('active');
$(this).parent('li').addClass('active');
});
Maurício
-Mensagem Original-
De: Charlie mailto:charlie...@gmail.com
Para: jquery-en@googlegroups.com
Enviada em: domingo, 29 de novembro de 2009 03:56
Assunto: Re: [jQuery] Selector Help
...
Dave Maharaj :: WidePixels.com wrote:
How would I go about adding class to the li in this set up?
lia href=# class=filterspanall/span/a/li
lia href=# class=filterspansome/span/a/li
lia href=# class=filterspannone/span/a/li
...
Re: [jQuery] Selector Help
Try this:
$('a.filter').click(function(){
$(this).parent().siblings('li').removeClass('active');
$(this).parent('li').addClass('active');
});
Maurício
-Mensagem Original-
De: Charlie
Para: jquery-en@googlegroups.com
Enviada em: domingo, 29 de novembro de 2009 03:56
Assunto: Re: [jQuery] Selector Help
...
Dave Maharaj :: WidePixels.com wrote:
How would I go about adding class to the li in this set up?
lia href=# class=filterspanall/span/a/li
lia href=# class=filterspansome/span/a/li
lia href=# class=filterspannone/span/a/li
...
Re: [jQuery] Selector Help
Even better :
$('a.filter').click(function() {
$(this).closest('ul').children().removeClass('active').end().end().closest('li').addClass('active');
});
Michel Belleville
2009/11/29 Mauricio (Maujor) Samy Silva css.mau...@gmail.com
Try this:
$('a.filter').click(function(){
$(this).parent().siblings('li').removeClass('active');
$(this).parent('li').addClass('active');
});
Maurício
-Mensagem Original-
*De:* Charlie charlie...@gmail.com
*Para:* jquery-en@googlegroups.com
*Enviada em:* domingo, 29 de novembro de 2009 03:56
*Assunto:* Re: [jQuery] Selector Help
...
Dave Maharaj :: WidePixels.com wrote:
How would I go about adding class to the li in this set up?
lia href=# class=filterspanall/span/a/li
lia href=# class=filterspansome/span/a/li
lia href=# class=filterspannone/span/a/li
...
[jQuery] Selector Help
How would I go about adding class to the li in this set up?
lia href=# class=filterspanall/span/a/li
lia href=# class=filterspansome/span/a/li
lia href=# class=filterspannone/span/a/li
$('a.filter').click(function(){
$(???).addClass('active');
});
Thanks
Dave
Re: [jQuery] Selector Help
$('a.filter').click(function(){
$(this).parent().addClass('active');
});
Dave Maharaj :: WidePixels.com wrote:
How would I go about adding class to the li in this set up?
lia href="" class="filter"spanall/span/a/li
lia href="" class="filter"spansome/span/a/li
lia href="" class="filter"spannone/span/a/li
$('a.filter').click(function(){
$(???).addClass('active');
});
Thanks
Dave
[jQuery] selector performance
I am using jquery 1.3.2. I was wondering which is faster and why:
$('#my-id .main table tr.my-class') or
$('#my-id .main table tr.my-class') or
$('#my-id tr.my-class')
Re: [jQuery] selector performance
As to the why I don't know, but as to the which the solution is quite easy :
do a benchmark.
Michel Belleville
2009/11/10 Adam Tistler atist...@gmail.com
I am using jquery 1.3.2. I was wondering which is faster and why:
$('#my-id .main table tr.my-class') or
$('#my-id .main table tr.my-class') or
$('#my-id tr.my-class')
Re: [jQuery] selector performance
i would the best thing to do regardless of your selection method is to store
them in variables.
like this
var obj = $(.wrap);
Now you have basically created an object reference point. you won't need to
re-create in 99% of cases.
so lets re-use our object reference.
// get the width of your object without making a new reference
var obj_width = obj.width();
// get a child element in your object without making a new reference to your
object
// also you are only searching within your object, not the whole page.
performance boost here
var element_in_object = $(.elementclass, obj);
//if you only need to make one reference in your whole script theres no need
to make so //many vars.
//you can point directly to it
// this would be more efficient if you don't need to reference your wrap
class again
var my_element = $(.wrap .elementclass);
I already know theres gonna be people ready to debate on their methods :)
but this is my thoughts.
On Tue, Nov 10, 2009 at 5:47 PM, Michel Belleville
michel.bellevi...@gmail.com wrote:
As to the why I don't know, but as to the which the solution is quite easy
: do a benchmark.
Michel Belleville
2009/11/10 Adam Tistler atist...@gmail.com
I am using jquery 1.3.2. I was wondering which is faster and why:
$('#my-id .main table tr.my-class') or
$('#my-id .main table tr.my-class') or
$('#my-id tr.my-class')
[jQuery] 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. I know you can use .parent() in jQuery, but am using Selenium RC and am limited to using selector functionality in the code. Thanks
[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] Selector and special characters
Hi,
I want all my form inputs which name start with fieldInstanceGroups
[0].fieldInstances[1].
I try with jQuery('input[name^=fieldInstanceGroups[0].fieldInstances
[1]]') but any result.
Then I try some requests, with \\ to escape special characters but I
have any result.
'input[name^=fieldInstanceGroups]';
= result ok
'input[name^=fieldInstanceGroups['+idGroup+']]';
= result ok
'input[name^=fieldInstanceGroups['+idGroup+'].fieldInstances]';
= result ok
'input[name^=fieldInstanceGroups['+idGroup+'].fieldInstances
['+idInstance+']]';
= ANY result
'input[name^=fieldInstanceGroups['+idGroup+'].fieldInstances\\
['+idInstance+'\\]]';
= ANY result
'input[name^=fieldInstanceGroups['+idGroup+']\\.fieldInstances\\
['+idInstance+'\\]]';
= ANY result
eltName = 'input[name^=fieldInstanceGroups\\['+idGroup+'\\]\
\.fieldInstances\\['+idInstance+'\\]]';
= ANY result
eltName = 'input[name^=fieldInstanceGroups['+idGroup+']\
\.fieldInstances['+idInstance+']]';
= ANY result
eltName = 'input[name^=fieldInstanceGroups\\['+idGroup+'\
\].fieldInstances\\['+idInstance+'\\]]';
= ANY result
Someone has an idea?
Thank you
[jQuery] Selector bind help
I have a simple form field that runs a query.
I have
$('#Query').bind('keyup', function() {
...delay then search
so after key up and delay it runs the search.
Now when I click on the #query field the dropdown appears with my previous
search text...if i select one it goes into the #query field but nothing
happens becasue the script is waiting for keyup action.
Can I add multiple events to trigger the query? If so how or what would be
the best idea?
Thanks,
Dave
[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] Selector question
How can I pick an id element (here #bridge1,#bridge2) and toggle its
child (here a p element) without actually using the id element as
parent?
'this p' apparently does not work.
$('#bridge1,#bridge2').click(function(){
$('this p').toggle();
return false;
});
Thanks for your help!
[jQuery] Selector help needed
with the markup like: prelt;ulgt; lt;ligt;lt;a href=quot;#quot;gt;Link 1lt;/agt;lt;/ligt; lt;ligt; lt;a href=quot;#quot;gt;Link 2lt;/agt; lt;ulgt; lt;ligt;lt;a href=quot;#quot; class=quot;activequot;gt;Link 2.1lt;/agt;lt;/ligt; lt;ligt;lt;a href=quot;#quot;gt;Link 2.2lt;/ agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;/ulgt; /pre i want to add a class active to , Link 2 (line 4), or links that have inner a.active links. how can i do it with jquery or even pure css?
[jQuery] Selector help
I'm pretty new to Javascript/ jQuery, so this is really bugging me.
I'm trying to get the height of an h1 that is a sibling to this. The
value for the variable h1Height, however, returned as null in the
console in Firebug. Perplexed, I tried console.logging ('this'+'+h1')
to see what it was interpreted as. It brought back this+h1, which
should select an h1 adjacent to this (which is a div).
Javascript
h1Height = $('this'+'h1').height();
What went wrong?
[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] jQuery selector performance / jQuery Tester
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
[jQuery] Selector :eq(x) issuing warning in FF
When calling this jQuery:
$(#homepage-slides img:eq(0)).fadeOut(300, function() {
$(#homepage-slides img:eq(1)).fadeIn(300, function() { $(#homepage-
slides img:eq(0)).remove(); });
});
I'm getting this warning in the Web Developer toolbar in Firefox:
Warning: Unknown pseudo-class or pseudo-element 'eq'.
It seems to work, however the image preload function I'm calling just
before it isn't functioning and I'm thinking it's because of this
issue. I'm using jQuery 1.3.2. Is there a different syntax to do this
now? If so, then the docs demo is incorrect.
[jQuery] Selector Syntax, new to jQuery
Starting to use jQuery having read 'jQuery in Action'.
Came across the following sysntax for sortable tables:
$('table.sortable').each(function() {
var $table = $(this);
$('th', $table).each(function(column) .
Clearly the $('th', $table).each syntax results in traversing 'th'
elements that are descendants of each of the 'table.sortable'
elements. I'm missing where this syntax is documented and explained.
[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] jquery selector
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
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] selector, second to last row of table
I've been trying for a while to alter the second to last row of a
table. I've tried several ways. The number of rows is dynamic so I
can't hard code a number into nth-child. I used $rowNeeded =
$thisRow.parents('table:first').children().children().length - 1 to
get the second to last row, but it doesn't seem like I can pass this
variable into nth-child either.
How can I select the second to last row of a table?
Thanks
[jQuery] selector strangeness -- is this a bug or am I doing it wrong?
Hello,
I'm getting inconsistant results across browsers with the following
test:
test.html ===
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=en
head
script type=text/javascript src=http://ajax.googleapis.com/
ajax/libs/jquery/1.3/jquery.min.js/script
/head
body
script
var xml;
$.ajax({
type: GET,
url: data.xml,
success: function(data){
var node = $(CI:first, data);
var query1 = $(T TX, node).length;
var query2 = $(T, node).find(TX).length;
var msg = '$(T TX, node).length: ' + query1;
msg += \n;
msg += '$(T, node).find(TX).length: ' + query2;
alert(msg);
}
});
/script
/body
/html
data.xml ===
?xml version=1.0 encoding=ISO-8859-2?
CNs
CI
T
TX/TX
/T
/CI
CI
T
TX/TX
/T
/CI
CI
T
TX/TX
/T
/CI
/CNs
What should happen is this:
- Load xml via ajax call
- select an xml node: $(CI:first, data);
- select a node within that node: $(T TX, node)
- second selection should only come up with one TX tag
However, in IE6 and IE8 (haven't tried IE7), the second selection
seems to ignor the node context, and search the entire xml document.
The test runs as expected in FireFox and Safari. Doing it this way
works in IE $(T, node).find(TX). Any explanations of why $(T TX,
node) doesn't work in IE?
thanks,
-Morgan
[jQuery] selector question
Hi, Im trying to select all spans in divs containing forms that dont have a certain id $(div:not([id='#'+pid]) form span).css(background-color, yellow); This selects all spans regardless of the ID.. Any suggestions would be great! Thanks in advance...
[jQuery] Selector help
I am cleaning up some html code and originally i had
li
div class=loading id=loading_profile/div
div id=profile
dl class=entry
dtProfile Settings/dt
dd class=skills
?php foreach ($user['Preferences'] as $preference):
echo $preference['name'] . ', ';
endforeach; ?
/dd
/dl
/div
/li
but the DIV inside the LI was too much so I went with adding the id=profile
to LI but script is no longer working
li id=profile
div class=loading id=loading_profile/div
div dl class=entry
dtProfile Settings/dt
dd class=skills
?php foreach ($user['Preferences'] as $preference):
echo $preference['name'] . ', ';
endforeach; ?
/dd
/dl
/li
SCRIPT:
$(a[class^='edit_']).click(function(){
var url_id = $(this).attr('href');
var x = $(this).attr('id').split('_');
var y = x[0];
var z = x[1];
$(#loading_+z).show(fast, function() {
$(#+z).slideUp( 1000, function(){
$(.edit_+z).hide(0.1, function() {
$(#+z).load( url_id , function(){
$(#+z).slideDown( 1000, function() {
$(#loading_+z).hide(function(){
$(#+z).fadeTo(fast, 1, function() {
$(#+z).fadeIn(slow);
});
});
});
return false;
});
});
});
});
});
Do i eed to edit the selecot as li#?
Dave
[jQuery] Selector not question
I am trying to disable all links except for the one clicked.
$('a[class^=edit_]').click(function(){
var url_id = $(this).attr('href');
var e = $(this).attr('class');
var x = $(this).attr('id').split('_');
var y = x[0];
var z = x[1];
alert(e);
the alert shows edit_profile so e = edit_profile
so i am trying to fade all classes with edit_ somethingto 0.25 except for
edit_profile but its not working.
What am I missing?
$('a[class^=edit_]:not(e)').fadeTo('slow' , 0.25 , function() {
}):
Thanks
Dave
[jQuery] jquery selector trainer
Hi all I made a jquery selector trainer. It's written using the jquery lib. http://lamp2.fhstp.ac.at/~lbz/beispiele/ss2009/jquery/ The problem I now have is that it is very slow and need Gigabytes of RAM for big examples using Firefox. Maybe someone has a hint to make it faster. Bernhard
[jQuery] Webkit not complying with simple jQuery selector
I'm attempting to make every .inputbox element except the last one
read-only on my webpage. Firefox and IE comply but Safari and Chrome
apply readonly to ALL .inputbox elements on the page, even the
last one.
I've narrowed down my issues to the selector in this line:
$(.inputbox:not(:last)).attr(readonly, readonly);
Am I missing something in this selector, or is there a problem with
Webkit? (I'm assuming Webkit since the problem spans Chrome and Safari
only.) One can reproduce this by using this HTML file:
html
head
titlejQuery Not Selector Test Case/title
script type=text/javascript src=jquery-1.3.2.min.js/script
script type=text/javascript
function doTest() {
$(.inputbox:not(:last)).attr(readonly, readonly);
}
/script
/head
body
input type=text class=inputbox value=Testing /br /
input type=text class=inputbox value=Testing /br /
input type=text class=inputbox value=Testing /br /
input type=text class=inputbox value=Testing /br /
input type=text class=inputbox value=Testing /br /
input type=text class=inputbox value=Testing /br /
input type=text class=inputbox value=Testing /br /
button onclick=doTest()Test me/button
/body
/html
[jQuery] Re: Webkit not complying with simple jQuery selector
On May 1, 12:34 pm, Matt matthew.h...@gmail.com wrote:
I'm attempting to make every .inputbox element except the last one
read-only on my webpage. Firefox and IE comply but Safari and Chrome
apply readonly to ALL .inputbox elements on the page, even the
last one.
I've narrowed down my issues to the selector in this line:
$(.inputbox:not(:last)).attr(readonly, readonly);
Am I missing something in this selector, or is there a problem with
Webkit? (I'm assuming Webkit since the problem spans Chrome and Safari
only.) One can reproduce this by using this HTML file:
Same here, different results on Chrome vs FF. $(.inputbox:not
(input:last)) or $('.inputbox').not(':last') for some reason work
fine. Time to file a ticket! http://dev.jquery.com/newticket/
cheers
-- ricardo
[jQuery] Re: Webkit not complying with simple jQuery selector
Awesome, glad that can be verified. Thank you!
Ticket opened: http://dev.jquery.com/ticket/4587
On May 1, 11:28 am, Ricardo ricardob...@gmail.com wrote:
On May 1, 12:34 pm, Matt matthew.h...@gmail.com wrote:
I'm attempting to make every .inputbox element except the last one
read-only on my webpage. Firefox and IE comply but Safari and Chrome
apply readonly to ALL .inputbox elements on the page, even the
last one.
I've narrowed down my issues to the selector in this line:
$(.inputbox:not(:last)).attr(readonly, readonly);
Am I missing something in this selector, or is there a problem with
Webkit? (I'm assuming Webkit since the problem spans Chrome and Safari
only.) One can reproduce this by using this HTML file:
Same here, different results on Chrome vs FF. $(.inputbox:not
(input:last)) or $('.inputbox').not(':last') for some reason work
fine. Time to file a ticket!http://dev.jquery.com/newticket/
cheers
-- ricardo
[jQuery] Selector issue (i think), Cant control specific elements
Heres a very stripped down version of the page i'm trying to write.
For simplicity, the Show / Hide functions (not meaning hide from view,
but within a db) are the same (they change the background color of the
div), the functions work for the most part but ignores certain divs
(the ones titled Hidden Category, Phones, and The New Hidden
Category). I cant figure out for the life of me why i cant select
them. I CAN select them if i do a sweep of all update_equip classes.
would settle for some sort of workaround, this is killing me
im using jquery-1.3.1.js livequery (in the actual page, the show /
hide links flip based on what you clicked)
the show / hide function
$('.category_options a').livequery('click', function() { //start
function on links clicked inside #top_nav
var category_id = $(this).attr(name);
var cat_action = $(this).attr(action);
if (cat_action == show){
$('div#'+category_id).css({'background-color' : 'yellow'});
}
if (cat_action == hide){
$('div#'+category_id).css({'background-color' : 'yellow'});
}
});
[jQuery] Selector help needed
Here's my code:
$(document).ready(function(){
$('#menulinks a').hover(function(){
setTimeout(function(){
$(this).stop().animate({
top : '40px',
paddingTop : '40px'
});
}, 1000);
});
});
Before I added a timeout, (this) sufficed. With the timeout set, (this) did
not select the hovered link. I tried another selector and it worked fine.
How can I specify (this) for this situation?
--
View this message in context:
http://www.nabble.com/Selector-help-needed-tp23289341s27240p23289341.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] selector speedup
Hi all I profiled my script with firebug and have seen that the filter() function is called very often. As far as I see this function is called when i use a selector like $(table[name=+name+])... Is there a possibility to speed that up? In XSLT there is the key function. see: http://www.w3schools.com/xsl/func_key.asp It's used to make XPATH queries fast. Is there a function like xslt:key for selectors in Jquery? thanks Bernhard
[jQuery] Selector questions
Hi, I have a couple of questions about selectors. I have the following HTML: = Some a elements and input elements here. ... ... a id=info-1-headingInformation Type 1/a div div input class=cat id=first type=checkbox/label for=firstFirst/label /div div input class=cat id=mid type=checkbox/label for=midMiddle/label /div div input class=info1-cat id=last type=checkbox/label for=lastLast/label /div /div ... ... More a elements and input elements here. = Question 1: In the click handler of the first checkbox, I would like to get the first, middle, and last checkboxes (but not the other checkboxes on the page). What selector should I use? Question 2: In the click handler of the first checkbox, I would like to get the first a element that it finds traversing up the hierarchy (i.e. the a with id=info-1-heading). What selector should I use? Thank you.
[jQuery] jQuery Selector Help
Hi,
Can some1 please explain this in detail to me? I am confused on the
selector part $('li id=_img'+index+'/li').
// add list to ul
var list = $('li id=_img'+index+'/li').attr
('class',_imageLoadClassName).appendTo('ul#'+_imgContainerId);
Thanks!
[jQuery] JQuery Selector
This form of a selector is undocumented..
('#%=x.y%').length
What does it mean ?
Thanks..
[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] selector :contains different behaviour in firefox and msie 7
hi,
i have a strange behaviour when parsing the xml below:
$.get('/test/Internetschuhe.XML', function(data) {
$(data).find('item').each(function() {
var $entry = $(this);
var $sizenotnull = $entry.find(stock:contains('0'));
alert($sizenotnull.length);
in firefox it works... the alert is 1 and thats right... i have one
size with the stock 0
in msie7 the alert is 0... why... is it a bug?
best regards
m cologne
?xml version=1.0 encoding=iso-8859-1 standalone=no?
itemdata
item
number131001051/number
numberformated131 001 051/numberformated
producer
id7558/id
nameECCOLET SKO GMBH/name
iln579260676/iln
vatidDE118625892/vatid
/producer
produceritem80184-01001/produceritem
articlesystem
id131/id
textStrassenhalbschuhe modisch/text
systemSONST/system
systemhierarchy1234/systemhierarchy
structures
structure
id1/id
textHerrenschuhe/text
/structure
structure
id13/id
textSchnürhalbschuhe/text
/structure
structure
id131/id
textStrassenhalbschuhe modisch/text
/structure
structure
id131/id
textStrassenhalbschuhe modisch/text
/structure
/structures
/articlesystem
maingroup
idSH/id
textSCHUHE/text
/maingroup
colorschwarz/color
attributes
attribute
idFarbe/id
valueschwarz/value
/attribute
attribute
idMaterial/id
valueGlattleder/value
/attribute
/attributes
variants
variant
idSOPO/id
textSonderposten/text
/variant
/variants
vat
idnormal/id
value19,00/value
/vat
sizetable
idN02/id
textGERMANY/text
/sizetable
standardN/standard
itemgroups
itemgroup
idINTERNET/id
/itemgroup
/itemgroups
pictureT:\Internet Bilder schuhe\131001051.jpg/picture
sizes
size
sizeid23/sizeid
sizebarcode400/sizebarcode
sizeshort 40/sizeshort
sizelong 40/sizelong
gpp 21,40/gpp
gppcurrencyEUR/gppcurrency
npp 21,15/npp
nppcurrencyEUR/nppcurrency
sp 59,95/sp
spcurrencyEUR/spcurrency
stock0/stock
/size
size
sizeid24/sizeid
sizebarcode410/sizebarcode
sizeshort 41/sizeshort
sizelong 41/sizelong
gpp 21,40/gpp
gppcurrencyEUR/gppcurrency
npp 21,15/npp
nppcurrencyEUR/nppcurrency
sp 59,95/sp
spcurrencyEUR/spcurrency
stock1/stock
/size
size
sizeid25/sizeid
sizebarcode420/sizebarcode
sizeshort 42/sizeshort
sizelong 42/sizelong
gpp 21,40/gpp
gppcurrencyEUR/gppcurrency
[jQuery] selector query question
Hi guys, new to jQuery here.. I am trying to query xml using jquery and having some problem I need to query all the node under node A with name=test if I do $(A).find(*[name=test]) it will return b,b1,c, d How do I query using selector to get only immediate child so I can get b,c,d (no b1) ??? help would be really appreciated ! Thanks example : A b name=test b1 name=test/ /b c name=test/ d name=test/ e name=somethingelse / /A
[jQuery] ~ selector is not selecting siblings
I have a table that has a list of songs - one for each row. I also
have a select menu that populates the song table data from an AJAX
query based on what was selected.
The first row of the table is a row (#NoSongs) that just says No
songs were found. in case no records were returned. And I just hide
and show that depending on the results.
Whenever the select menu is changed, it calls a function where the
logic is like this:
function ChangeSongs() {
$(#NoSongs ~ tr).fadeOut('slow',function() {
$(#NoSongs ~ tr).remove();
});
// AJAX Query and a bunch of logic to create new table rows --
Everything here on works fine.
}
The problem is that $(#NoSongs ~ tr) isn't finding any of its
siblings. So, it just keeps adding new rows without deleting the old
ones. And $(#NoSongs ~ tr).size() returns 0 for some reason.
I could try .siblings() but I only want the rows after #NoSongs
(there's a table header row as well) and .siblings() returns all
siblings forward and backward.
I'm stumped. It should work even if #NoSongs is hidden from view,
right? I'm really not comprehending why this isn't working.
Any help would be appreciated. Sorry I can't show the actual code or
site.
[jQuery] Selector Efficiency?
So... a question regarding selector efficiency.
The following snippet of HTML describes attributes associated with a polygon
in an KML. Its basically a table of data, contained as spans in lis in
a ul. Given this snippet, what would be the best (fastest) way to return
the values of MAP_ID and SITE_ADDRESS
foo = h4GISDATA.ASSESSPARNC_POLY_PUBLIC/h4
ul class=textattributes
listrongspan class=atr-nameMAP_ID/span:/strong span
class=atr-value16-27/span/li
listrongspan class=atr-nameSITE_ADDRESS/span:/strong span
class=atr-value396 Main St/span/li
listrongspan class=atr-nameSITE_OTHER_FIELD/span:/strong span
class=atr-valueGrat Data/span/li
listrongspan class=atr-nameUSE_CODE/span:/strong span
class=atr-value101/span/li
listrongspan class=atr-nameTOWN_ID/span:/strong span
class=atr-value116/span/li
listrongspan class=atr-nameWARREN_GROUP_05_MAP_ID/span:/strong
span class=atr-valueM:0016 B: L:0027/span/li
listrongspan class=atr-nameACRES/span:/strong span
class=atr-value0.67102373655/span/li
/ul
The following works
parcelOutput = 'Parcel ID: ' +
jQuery(foo).find('li:contains(MAP_)').not('li:contains(WARREN_GROUP)').children('.atr-value').text()
+ 'br' + 'Address: ' +
jQuery(foo).find('li:contains(SITE_ADDRESS)').children('.atr-value').text();
Is there a better/more efficient way to return these values?
Thanks!
[jQuery] selector best practice
This may sound stupid to y'all jquery practitioners, but i wonder which method is fastest (recommended) for selecting a cell with a class in a big table (think like 1000+ rows 100+ columns): (#tableid tbody tr.rowclass td.cellclass) or is it (td.cellclass) or (.cellclass). And how about if the cell happens to have a unique id: (#tableid tbody tr#uniquerow td#uniqueid) or just (#uniqueid) Philosophically, the question being is it better to put as much detail as structurally already known by the programmer into the selector or just anything goes and let jquery handle it as long as it works.
[jQuery] Selector broken with 1.3.1 vs 1.2.6
I was using 1.2.6 with the following line which worked perfectly.
row.find(select. + name + option[value=' + value +
']).attr('selected', true);
Now with 1.3.1 a javascript error is happening
A Runtime Error has occurred.
Do you wish to Debug?
Line: 4723
Error: Exception thrown and not caught
Any thoughts as to the cause?
--
View this message in context:
http://www.nabble.com/Selector-broken-with-1.3.1-vs-1.2.6-tp22003660s27240p22003660.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] selector to return the number of rows in a table before the row I just selected
Hi, I am selecting the row of a table. I would like to be able to count how many rows there are in the table before the row I just selected. i suppose there is a jQuery selector that will do this. Thanks
[jQuery] selector finds element but changing css has no effect?
Hi,
I have a div that is inside a td.
My code is the following fragment:
var currentelement = jQuery(# + activecolid);
var selectedcontent = jQuery(# + activecolid).find
(div.contentdisplay);
alert(currentelement.html());
alert(selectedcontent.html());
selectedcontent.css({border: 10px solid #699000});
currentActiveEl = activecolid;
both of the alerts show up:
alert 1:
td class=activatingcellspan class=activation
id=activator5toplevel onclick=activation('5toplevel');return
false;☐/span/tdtd class=hiddendatadiv class=hiddenform
id=form5toplevel name=form5toplevelinput id=5toplevel_1HttpUri
name=5toplevel_1HttpUri value=http://radar.oreilly.com/;
type=text/form/div/tdtd class=activatedcol
id=5toplevelactivcoldiv class=contentdisplayh5a href=http://
radar.oreilly.com/O'Reilly Radar - Insight, analysis, and research
about emerging technologies/a/h5/div/td
alert 2:
h5a href=http://radar.oreilly.com/;O'Reilly Radar - Insight,
analysis, and research about emerging technologies/a/h5
however when I change the css on selectedcontent it doesn't make any
change. There isn't any setting for the contendisplay class in the
css.
I have tried to change setting the css to
selectedcontent.css(border,10px solid #699000);
I have also retrieved the css value for border afterwards and it
returns the correct value.
with alert(selectedcontent.css); returning
10px solid rgb(105, 144, 0)
[jQuery] Re: what would be the opposite of top.frames as a jquery selector context?
it ended up being quite easy actually:
$('#'+self.name, top.document).hide();
usually whenever I try to so something and it requires more than 1
line of code it's my fault, not jquery's...
[jQuery] what would be the opposite of top.frames as a jquery selector context?
If i want to do something in a parent frame, I would do this:
$('#myDiv', top.document).hide();
but what about this following scenario? I'm inside a frame that was
created like so:
$('body', top.document).append('iframe id=myiframe/iframe');
inside myiframe, I now want to know the id of my iframe, because I
would not know it.
All I am able to see in the DOM is the topmost document.
I could traverse through all the iframes and get their ID's but that's
useless because I wouldn't know which of them is the one I'm currently
in.
I suppose I'm simply trying to pass a variable to a child frame so it
becomes available on the frame's document.onload().
[jQuery] Re: what would be the opposite of top.frames as a jquery selector context?
maybe the parent of your documentElement?
On 27 Jan., 21:36, jquertil til...@gmail.com wrote:
If i want to do something in a parent frame, I would do this:
$('#myDiv', top.document).hide();
but what about this following scenario? I'm inside a frame that was
created like so:
$('body', top.document).append('iframe id=myiframe/iframe');
inside myiframe, I now want to know the id of my iframe, because I
would not know it.
All I am able to see in the DOM is the topmost document.
I could traverse through all the iframes and get their ID's but that's
useless because I wouldn't know which of them is the one I'm currently
in.
I suppose I'm simply trying to pass a variable to a child frame so it
becomes available on the frame's document.onload().
[jQuery] Re: what would be the opposite of top.frames as a jquery selector context?
Look at the test case I made here and let me know if it helps:
http://jquery.nodnod.net/cases/73
On Jan 27, 3:36 pm, jquertil til...@gmail.com wrote:
If i want to do something in a parent frame, I would do this:
$('#myDiv', top.document).hide();
but what about this following scenario? I'm inside a frame that was
created like so:
$('body', top.document).append('iframe id=myiframe/iframe');
inside myiframe, I now want to know the id of my iframe, because I
would not know it.
All I am able to see in the DOM is the topmost document.
I could traverse through all the iframes and get their ID's but that's
useless because I wouldn't know which of them is the one I'm currently
in.
I suppose I'm simply trying to pass a variable to a child frame so it
becomes available on the frame's document.onload().
[jQuery] Re: what would be the opposite of top.frames as a jquery selector context?
the $(frames.frameName.document).ready is not actually working on
firefox.. you would probably have to put $(document).ready in the src
page and poll it to see if the document is actually ready
On Jan 27, 4:27 pm, jay jay.ab...@gmail.com wrote:
Look at the test case I made here and let me know if it helps:
http://jquery.nodnod.net/cases/73
On Jan 27, 3:36 pm, jquertil til...@gmail.com wrote:
If i want to do something in a parent frame, I would do this:
$('#myDiv', top.document).hide();
but what about this following scenario? I'm inside a frame that was
created like so:
$('body', top.document).append('iframe id=myiframe/iframe');
inside myiframe, I now want to know the id of my iframe, because I
would not know it.
All I am able to see in the DOM is the topmost document.
I could traverse through all the iframes and get their ID's but that's
useless because I wouldn't know which of them is the one I'm currently
in.
I suppose I'm simply trying to pass a variable to a child frame so it
becomes available on the frame's document.onload().- Hide quoted text -
- Show quoted text -
[jQuery] Re: what would be the opposite of top.frames as a jquery selector context?
This seemed to work on FF and IE:
$('#myiframe')[0].onload=function(){
$(body,frames.frmName.document).html('test')
}
On Jan 27, 3:36 pm, jquertil til...@gmail.com wrote:
If i want to do something in a parent frame, I would do this:
$('#myDiv', top.document).hide();
but what about this following scenario? I'm inside a frame that was
created like so:
$('body', top.document).append('iframe id=myiframe/iframe');
inside myiframe, I now want to know the id of my iframe, because I
would not know it.
All I am able to see in the DOM is the topmost document.
I could traverse through all the iframes and get their ID's but that's
useless because I wouldn't know which of them is the one I'm currently
in.
I suppose I'm simply trying to pass a variable to a child frame so it
becomes available on the frame's document.onload().
[jQuery] selector for children of specific element?
I need to run thru a table and do something for all rows that have a checkbox that is selected. I have to collect values from several columns in that row. Is there a way in jQuery to find child elements for a specific DOM element or jQuery wrapped set item? Thanks very much. I'm just getting started, but really enjoying jQuery, -- Chris
[jQuery] Selector Help
I have a table structure with a multiple rows containing a checkbox input and 4 text inputs with distinct classes. I want to prefill two of the text inputs in the same row where the checkbox is checked. Example code for the first two rows: table tr id=row1 tdinput type=checkbox //td tdinput type=text class=email //td tdinput type=text class=contact //td tdinput type=text class=realname //td tdinput type=text class=sport //td /tr tr id=row2 tdinput type=checkbox //td tdinput type=text class=email //td tdinput type=text class=contact //td tdinput type=text class=realname //td tdinput type=text class=sport //td /tr /table I need help me crafting the correct selector to focus control onto the text input for the input with class=contact and class=email. I can write the function to manipulate the attributes but I can't figure out the selector. I haven't had any luck with prev ~ siblings or prev + next. Thanks in advance.
[jQuery] $(selector).add($(.next))
Hello, Sorry about my grammar, English isn't my tang. How I add to $ the next elmement. Some think Like I can do: $(selector).add( $(selector).next) But I think that there is a better solution. Thank you.
[jQuery] Selector *= not works in Safari 3.2.1 and Chrome 1.0.154.43
Hi all, Here is my situation. HTML Page DTD Type is declared as following !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd Javascript Code as following $(#fp option[text*='+subject+']).remove(); Where #fp is a select.../select object Works fine in IE7 and FireFox 3.0.5 How can I fix this line or is a bug? Thanks in advance!
[jQuery] Selector Question from a newb
This has probably been asked several times on the list but I'm having
trouble finding a resolution.
I have a simple problem where I dynamically add html to a div when the
user clicks a link based on an event handler, which works fine.
However, I am further trying to bind events to a couple of buttons
that are part of the dynamic html that has just been added.
Using the following selector, I am able to view the newly added html
table and see the input button listed:
$('#' + parentId + ' #submitForm table')
But, nothing is returned when I try to use something similar to get
the submit button:
$('#' + parentId + ' #submitForm table #button_id')
I've tried a number of different selectors, including '' and '
' (space) but can't seem to find it correctly in the DOM.
Thanks for any help.
John
[jQuery] Selector problem with $( a[ajax\\:id='46'] )
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: alert( $( a[ajax\\:id='46'] ).attr( 'href' ) ); I tried a lot, but it's not working? Any hint would be appreciated! thanks
[jQuery] jQuery selector question - Having : in attribute name
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
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] Selector Question
Why does this work?
$($(button)[0]).bind(click, function(event){return AlertOnClick
(this + not + $(button)[0]);});
And why does this DOESN'T?
$(button)[0].bind(click, function(event){return AlertOnClick(this
+ not + $(button)[0]);});
[jQuery] Selector Question
I'm fairly new to the framework and I've been messing around a bit.
These below confuses me.
1. Why is this snippet not working? Firefox's error console throws
an error saying $(button)[0].bind is not a function
$(button)[0].bind(click, function(event){alert(this)});
2. And why does this work?
$($(button)[0]).bind(click, function(event){alert(this)});
[jQuery] Selector help
I'm using a attribute selector and I want to combine the *= with the ! = on href. Is there any way to do this?
[jQuery] selector question: how many ul above $(this) ?
hello mates,
i have a multiple level dropdown menu, the markup is an unordered list
of the likes:
ul
lia href=#me/a
ullia href=#me/a/li
lia href=#me/a
ullia href=#me/a/li
lia href=#me/a/li
lia href=#me/a/li
/ul
/li
lia href=#me/a/li
/ul/li
lia href=#me/a
ullia href=#me/a/li
lia href=#me/a
ullia href=#me/a/li
lia href=#me/a/li
lia href=#me/a/li
/ul
/li
lia href=#me/a/li
/ul
/li
lia href=#me/a/li
/ul
Imagine i click in the link 3 levels down the list. Can someone tell
me how i can find the value 3, meaning, the amount of parent ul?
i tried
var $thisA = $(this);
var $thisLI = $thisA.parent();
var $thisMenu = $thisLI.parent();
var $thisSubmenu = $thisLI.children('ul');
var thisMenuLevelInt = $thisLI.parents().index($thisMenu[0]);
but that always returns 0.
Your help is as usual, *much* appreciated !
Alexandre
