Get list of web parts on the client-side

Question

Is it possible to use the Client Object Model or jQuery to get a list of the SharePoint 2010 web parts on a certain part of the page, say those in the DIV #main-content? To be more specific, I'd like to get a handle to the container for each web part in that DIV. Thanks.

Answer 1

I didn't see the #main-content div in a SharePoint 2010 web part page. If this is a custom master page and you have it, you could use a jQuery selector like this:

//Set the background color to grey of all web parts in the zone
$('#main-content .s4-wpcell-plain').css('background-color', '#f0f0f0');

It would return a collection of td elements that define the web parts in the zone.

<td class="s4-wpcell-plain" id="MSOZoneCell_WebPartctl00_m_g_c2b421fb_cee5_4562_b2db_6a4adcc2c0e6" vAlign="top" nodeIndex="1" sizcache="2" sizset="22">

To loop through each td element that was selected:

$('#main-content .s4-wpcell-plain').each(function(){

    //update the header color
    $(this).find('.ms-WPHeader').css('color', 'red');

});

Alternatively, to iterate through all web parts on the page, you could remove #main-content from the selector:

//Set the background color to grey of all web parts on the page
$('.s4-wpcell-plain').css('background-color', '#f0f0f0');

Answer 2

I have a Codeplex project that does just that:

http://spell.codeplex.com/documentation

It's only version 0.0.1, but works quite well. Of course, it's an overkill in your case, but it could be useful if you need to do other stuff with the Web Parts in the future. As you can see from the documentation, it retrieves for each Web Part the header, body and container.