Sorry for the late reply, Ralph… Here’s what I’m trying to do:
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.)
Here’s what 1 TD element basically looks like:
Widget 1
John Doe, Jane Doe, Stephen Spielburg, Tom Hanks, Bill Clinton
Service 1 Service 1
Service 2 Service 2
Service 3 Service 3
The problem I’m having is when something like this occurs:
Widget N
John Doe, Jane Doe, Stephen Spielberg, Tom Hanks, Bill Clinton, Operah Winfrey, Jane Fonda, Mark Hamil, Harrison Ford, Hugh Laurie, Samual Jackson, Olivia Wilde, Marilyn Monroe, Brad Pitt, Gary Oldman
Service 1 Service 1
Service 2 Service 2
Service 3 Service 3
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 N
John Doe, Jane Doe, Stephen Spielberg+ <– Clicking on this would do the following below…
Service 1 Service 1
Service 2 Service 2
Service 3 Service 3
Widget N
John Doe, Jane Doe, Stephen Spielberg, Tom Hanks, Bill Clinton,
Operah Winfrey, Jane Fonda, Mark Hamil, Harrison Ford,
Hugh Laurie, Samual Jackson, Olivia Wilde, Marilyn Monroe,
Brad Pitt, Gary Oldman
Service 1 Service 1
Service 2 Service 2
Service 3 Service 3
I can handle the CSS stuff because I know already how I need to change their floats, etc. The part I’m struggling with is the jQuery to limit the number of links.
Here’s the general markup of a single TD element:
<td class="col-1 col-first"> <div class="views-field views-field-title">
<a href="" title="">Widget N</a>
</div>
<div class="views-field views-field-field-product-contacts">
<a href="" title="">John Doe</a>
<a href="" title="">Jane Doe</a>
<a href="" title="">Stephen Spielberg</a>
<a href="" title="">Tom Hanks</a>
...
</div>
<div class="views-field views-field-field-product-services-left">
<a href="" title="">Service 1</a>
<a href="" title="">Service 2</a>
<a href="" title="">Service 3</a>
</div>
<div class="views-field views-field-field-product-services-right">
<a href="" title="">Service 1</a>
<a href="" title="">Service 2</a>
<a href="" title="">Service 3</a>
</div>
</td>
Here’s where I am with the jQuery:
$('.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));
});
});
});