[jQuery] Re: jQuery Selector Help
[ ... snipped ... ] ... and after looking at your code (which always helps), I see you're referencing this (as opposed to jQuery's $(this)), which is why html() wouldn't have worked. In that case, sure. It's been said that this is more efficient than creating a jQuery reference to it via $(this). So to clarify... this.innerHTML is the functional equivalent of $(this).html(), but without the cost of creating a new jQuery object for each iteration of your each(). [ ... snipped ... ] Thanks for the explanation. I went back and cleaned up my code to use jQuery(this).html() instead of this.innerHTML and all is well. Mike
[jQuery] Re: jQuery Selector Help
On Dec 22, 8:03 am, Dhruva Sagar dhruva.sa...@gmail.com wrote: I would suggest you to wrap the sections within * into a div and select that div. Thanks Regards, Dhruva Sagar. [ ... snipped ... ] Unfortunately I don't have control of the generated content. The content is generated by a WordPress Calendar plugin that I am reluctant to modify which is why I would like to find a way to do this with jQuery. Mike
[jQuery] Re: jQuery Selector Help
Well, you selected BR elements, which are empty elements, so it's no mystery why this.innerHTML returns undefined... Also, DIVs shouldn't appear inside SPANs...
Re: [jQuery] Re: jQuery Selector Help
2009/12/22 Šime Vidas sime.vi...@gmail.com
Well, you selected BR elements, which are empty elements, so it's no
mystery why this.innerHTML returns undefined...
Also, DIVs shouldn't appear inside SPANs...
He did state that he's using generated HTML. He has no control over it.
Mike - this isn't really a jQuery problem per se. You're jQuery selectors
match DOM elements. Not so much the contents of those elements.
What you can do is search for the containing element (in this case, you can
look for a span with a class of event), and replace all instances of br
/* with just the br /.
$(document).ready(function() {
var newHTML = $('span.event').html().replace(/(br.*)\s*\*/g, '$1');
$('span.event').html(newHTML);
});
The expression is looking for a br / (or br or br/) followed by any
white space (including tabs), followed by an asterisk. It replaces that
pattern with the br / alone (removing the asterisk).
Disclaimer: I'm no regex guru, so if anyone sees a way to clean up that
expression, please feel free.
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] Re: jQuery Selector Help
On Dec 22, 12:09 pm, Charlie Griefer charlie.grie...@gmail.com
wrote:
2009/12/22 Šime Vidas sime.vi...@gmail.com
Well, you selected BR elements, which are empty elements, so it's no
mystery why this.innerHTML returns undefined...
Also, DIVs shouldn't appear inside SPANs...
He did state that he's using generated HTML. He has no control over it.
Mike - this isn't really a jQuery problem per se. You're jQuery selectors
match DOM elements. Not so much the contents of those elements.
What you can do is search for the containing element (in this case, you can
look for a span with a class of event), and replace all instances of br
/* with just the br /.
$(document).ready(function() {
var newHTML = $('span.event').html().replace(/(br.*)\s*\*/g, '$1');
$('span.event').html(newHTML);
});
The expression is looking for a br / (or br or br/) followed by any
white space (including tabs), followed by an asterisk. It replaces that
pattern with the br / alone (removing the asterisk).
[ ... snipped ... ]
Thanks for pointing me in the right direction. This is what I ended
up getting to work:
jQuery(span.event, .calendar-table).each(function(){
var html = this.innerHTML.replace(/(br\s*\/*)\s*\*/
g, \'$1\');
jQuery(this).html(html) ;
}) ;
I changed the regular expression slightly to eliminate the .* portion
and changed .html() to .innerHTML. I don't know enough jQuery to know
why I had to do that but had seen it elsewhere so tried it and it
worked.
Thanks,
Mike
Re: [jQuery] Re: jQuery Selector Help
On Tue, Dec 22, 2009 at 10:34 AM, Mike Walsh mike_wa...@mindspring.comwrote:
[ ... snipped ... ]
Thanks for pointing me in the right direction. This is what I ended
up getting to work:
jQuery(span.event, .calendar-table).each(function(){
var html = this.innerHTML.replace(/(br\s*\/*)\s*\*/
g, \'$1\');
jQuery(this).html(html) ;
}) ;
I changed the regular expression slightly to eliminate the .* portion
and changed .html() to .innerHTML. I don't know enough jQuery to know
why I had to do that but had seen it elsewhere so tried it and it
worked.
Thanks,
Mike
.html() retrieves the innerHTML.
Really no functional difference, but for the sake of consistency, since
you're leveraging jQuery, I'd prefer to see consistent jQuery code (unless
there's a compelling reason not to).
And yeah... just a preference. Not saying wrong or right. But I am saying
you shouldn't have -had- to do that :)
Anyway, glad you got it working. That's the important bit :)
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
Re: [jQuery] Re: jQuery Selector Help
On Tue, Dec 22, 2009 at 10:40 AM, Charlie Griefer charlie.grie...@gmail.com
wrote:
On Tue, Dec 22, 2009 at 10:34 AM, Mike Walsh mike_wa...@mindspring.comwrote:
[ ... snipped ... ]
Thanks for pointing me in the right direction. This is what I ended
up getting to work:
jQuery(span.event, .calendar-table).each(function(){
var html = this.innerHTML.replace(/(br\s*\/*)\s*\*/
g, \'$1\');
jQuery(this).html(html) ;
}) ;
I changed the regular expression slightly to eliminate the .* portion
and changed .html() to .innerHTML. I don't know enough jQuery to know
why I had to do that but had seen it elsewhere so tried it and it
worked.
Thanks,
Mike
.html() retrieves the innerHTML.
Really no functional difference, but for the sake of consistency, since
you're leveraging jQuery, I'd prefer to see consistent jQuery code (unless
there's a compelling reason not to).
And yeah... just a preference. Not saying wrong or right. But I am saying
you shouldn't have -had- to do that :)
Anyway, glad you got it working. That's the important bit :)
... and after looking at your code (which always helps), I see you're
referencing this (as opposed to jQuery's $(this)), which is why html()
wouldn't have worked.
In that case, sure. It's been said that this is more efficient than
creating a jQuery reference to it via $(this).
So to clarify... this.innerHTML is the functional equivalent of
$(this).html(), but without the cost of creating a new jQuery object for
each iteration of your each().
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
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
...
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
