How can I add a class to leaflet layer groups? - leaflet

Question

I am making a game map with different layer groups. Everything works fine, but is it possible to add a class to the Layer groups as shown below?
The reason why is because I would like for example to place the second layer group on top of the first layer group. I know it is possible to add a class and then changing the z-index, but I have no idea how to do this.
This is how I have set up the Layer groups currently.
// Layer Groups
var lg_locat = L.layerGroup([locat_001, locat_002, locat_003,
locat_004]).addTo(map);
var lg_quests = L.layerGroup([quest_001, quest_002, quest_003,
quest_004, quest_005, quest_006, quest_007]).addTo(map);
var lg_noticeboards = L.layerGroup([noticeboard_001,
noticeboard_002, noticeboard_003]).addTo(map);
var lg_treasures = L.layerGroup([treasure_001, treasure_002,
treasure_003, treasure_004, treasure_005]).addTo(map);
Example of the map: http://www.droogjeproductions.nl/leaflet-map-test/index.html

Answer 1

You can call the setZIndex() method on the layer groupe which is setting the z-index of each layer of the layer group
For exemple if lg_noticeboards are above quests which are above treasures which are above locat :
var lg_locat = L.layerGroup([locat_001, locat_002, locat_003,
locat_004]).addTo(map).setZIndex(1);
var lg_quests = L.layerGroup([quest_001, quest_002, quest_003,
quest_004, quest_005, quest_006, quest_007]).addTo(map).setZIndex(3);
var lg_noticeboards = L.layerGroup([noticeboard_001,
noticeboard_002, noticeboard_003]).addTo(map).setZIndex(4);
var lg_treasures = L.layerGroup([treasure_001, treasure_002,
treasure_003, treasure_004, treasure_005]).addTo(map).setZIndex(2);
Something like that may work I think, if it doesn't try this:
lg_locat.setZIndex(1);
lg_quests.setZIndex(3);
lg_noticeboards.setZIndex(4);
lg_treasures.setZIndex(2);