javascript – How to assign an ID or Class to specific Webpart in Sharepoint


I’m working with Sharepoint on a client project and I’m finding it a bit cumbersome to navigate. I see that Sharepoint seems to generate dynamic ID names for its web parts when they are created; an example would be MSOZoneCell_WebPartWPQ4.

I’m not having any issues accessing this particular <div> in a vacuum, my CSS/JS usages are functioning properly. My issue lies with the dynamic nature of the naming convention. Let’s say I hard code some JS to look for MSOZoneCell_WebPartWPQ4 and then hide this <div> when you click a button. It works until you start to add additional web parts or remove other web parts that existed prior to the creation of the one I’m trying to work with.

It’s already happened to me on one occasion, after deleting an unused web part that was being hidden (display:none by a previous dev) it caused all the web parts to shift their names accordingly. MSOZoneCell_WebPartWPQ4 became MSOZoneCell_WebPartWPQ3 and so forth.

My ideal solution is to simply circumvent this entirely by either assigning each web part with a unique id/class that Sharepoint won’t be changing, but I can’t for the life of me figure out how to achieve this.

Perhaps there is a more graceful solution that omits my idea entirely?