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?
 <li><a href="#" class="filter"><span>all</span></a></li>
<li><a href="#" class="filter"><span>some</span></a></li>
<li><a href="#" class="filter"><span>none</span></a></li>

...

  

 

 

 

Reply via email to