Come selezionare un gruppo di tag che non hanno figli di un certo tipo

jQuery è giunto alla versione 1.4! Oltre a varie nuove features e la “solita” riscrittura del codice, tutta la documentazione è stata rivista in maniera davvero più leggibile rispetto a prima. Ma vediamo alla questione di questo post; problema: aggiungere, tramite jQuery, una classe a tutti i tag a che possiedono l’attributo target impostato a _blank!
Questo l’avevamo già visto in Very short snippet: jQuery auto target blank link. La questione è che spesso anche le immagini hanno un link ad una nuova finestra e aggiungere un’ulteriore immagine al bordo non è molto bello. Per far in modo che su particolare link non venga applicata la classe esistono due modi:

Aggiungere una classe

Il primo metodo, che vale con qualsiasi link, è quello di aggiungere una classe, ad esempio noexternal, a tutti quei link che, nonostante contengono l’attributo target="_blank", non vogliamo mostrino l’immagine. In pratica vogliamo far in modo che jQuery non li prenda in considerazione.

1
$('a[target=_blank]').not('.noexternal').addClass('external');

Questo meotdo, seppur efficace, costringe comunque ad inserire nel link che vogliamo escludere la classe noexternal:

1
2
3
<a target="blank" href="http://www.undolog.com">Link esterno con immagine</a>

<a target="blank" class="noexternal" href="http://www.appleside.it">Link esterno senza immagine</a>

Usare un ciclo each()

In alternativa, per disabilitare l’uso della classe external su tutti quei link che contengono un’immagine, possiamo usare:

1
2
3
4
5
6
7
    $('a[target=_blank]:not(.noexternal)').each(
        function() {
            var me = this;
            if(!($(me).children('img').length > 0) )
                 $(me).addClass('external');
        }
    );

Questa svolge la medesima funzione di quella precedente con l’aggiunta della verifica se il “primo” figlio è un’immagine. In caso affermativo la classe external non viene aggiunta al tag a.
Sarebbe interessante capire se esiste un metodo per fare la stessa cosa senza usare un “ciclo” each()!

Non ci sono commenti per questo Post

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL