Alcuni giorni fa Andreas mi aveva chiesto un aiuto per risolvere un problema nel layout del suo sito in WordPress. In pratica dato che non tutti gli articoli del blog avevano un link "Read More", questi venivano ovviamente visualizzati per intero. E qui entra in gioco jQuery.
Studiando la struttura DOM del blog mi sono accorto che tutti gli articoli erano racchiusi nell'elemento blog_item. A questo punto potevo creare un link partendo dal permalink contenuto in ciascun titolo, ma restava un problema: anche nascondendo gli elementi successivi ai primi due paragrafi di ciascun post, questi non avevano una struttura definita. Infatti potevano essere paragrafi, intestazioni, liste e quindi il metodo nextAll() non poteva funzionare.
Ho deciso di creare un elemento vuoto da usare come segnaposto:
(function($) {
$(function() {
if($('div.blog_item').length) {
var posts = $('div.blog_item');
posts.each(function() {
var post = $(this);
var $wrapper = $('div.wpb_wrapper', post);
if(!$('h6.read_more', post).length) { // non è presente un "Read More" ?
var second = $('p', post).eq(1); // secondo paragrafo del post
// inserisco il link
$('<h6>').addClass('read_more').
html('<a href="' + post.find('h3 a').attr('href') + '">Read More</a>').insertAfter(second);
//creo il segnaposto
$('<div class="sibling"/>').insertAfter($('h6.read_more', post));
// uso il segnaposto per nascondere gli altri elementi
$('div.sibling', post).nextAll().hide();
}
});
}
});
})(jQuery);
Si tratta di una soluzione semplice ma efficace.