I'm trying to figure out a way to truncate if 'N' number of links exist within .content. I have a function that helps me with trimming on word boundaries of individual stings, but I'm kind of lost when it comes to trimming individual links. Do any of you have any links to some tutorials that teach how to do this? How is this done? (I'm using jQuery with all this.)

ralphm
—
2013-03-11T08:17:45Z —
#2

[ot]I don't know the answer to this, but for fun, tried it with CSS. The code in red hides all links after number 10:

I have multiple TDs and inside each TD are various pieces of information, but essentially consist 1 title link, 1 or 2 sub-links, and then multiple sub-sub-links. (For example, consider a product directory that displays a product name, it's reps, and the items of servicing a given product handles.)

What I would like is a means to click on a tiny '+' sign-link at the end of, say, the third name whereby when the + sign is toggled, the rest of the names would be exposes inside the div they reside in like so:

Widget NJohn Doe, Jane Doe, Stephen Spielberg+ <-- Clicking on this would do the following below...Service 1 Service 1Service 2 Service 2Service 3 Service 3

$('.views-view-grid td').each(function(){ //With each TD element...
total_width = $(this).width(); //Get the width of the given TD container, which currently totals to 218px each.
$(this).find('.views-field-title').find('a').text(truncate($(this).find('.views-field-title').find('a').text(),20));//Truncate the title to a max number of characters. (The truncate function is left out of this.)
//Now let's limit the number of names we output on the page inside each TD...
if($(this).find('.views-field-field-product-contacts').find('a').length > 3){ //If we have more than 3...
//$(this).text(truncate($(this).text(),15)); //Will eventually truncate the names. Again, truncate() is left out from this Sitepoint post for sake of simplicity.
var parts = $(this).find('.views-field-field-product-contacts .field-content').text().split(','),i,l;
for (i = 0, l = parts.length; i < l; i += 2){
if(i<2){
console.log(parts[i]); //This gives me each name in its entirety.
}else{
if(i=4){
console.log('...'); //What this is supposed to do is show me when a group of names has more then 3.
break;
}
}
}
//This is where I was before the above FOR loop. I tried to use your idea of nth targeting, and it kind of worked, but I thought that the FOR approach would be more concise (I might be wrong?)
//$(this).find('.views-field-field-product-isu-contacts').find('div.field-content').addClass('more');
//$(this).find('.views-field-field-product-isu-contacts').find('div.field-content a:nth-child(3)').text('+');
//$(this).find('.views-field-field-product-isu-contacts').find('div.field-content a:nth-child(3)').attr('href',$(this).find('.views-field-title').find('a').attr('href'));
//$(this).find('.views-field-field-product-isu-contacts').find('div.field-content a:nth-child(3)').attr('class','final');
}
//Services Left...
$(this).find('.views-field views-field-field-product-services-left').find('a').each(function(){
$(this).text(truncate($(this).text(),10));
});
//Services Right...
$(this).find('.views-field views-field-field-product-services-right').find('a').each(function(){
$(this).text(truncate($(this).text(),10));
});
});
});