What I want to do is when the user clicks on a color(div.colour_palette_box) I want to update Big Box(div.region). Problem is code should be dynamic since I have several set(div.color_set). One of them are shown below.
This is the UI which I'm referring to,
In fire bug it will look like this below.
What I tried up to now is.
jQuery('div#color_wrapper').on('click','div.colour_palette_box',function(){
//jQuery(this).closest('div.region');
//jQuery(this).prev('div.region');
//both does not work
});
Above code does not get me the closest div.region to the clicked div.colour_palette_box ? How can I get it ?
Update
Actual HTML
<div class="color_set">
<div class="region">
<div colorpalette="colour_selection_box_bg" class="colour_box"></div>
<p>Product Background</p>
</div>
<div class="colour_selection_box_bg colorpalette" style="display: block;">
<img src="components/com_jink/assets/images/close_mark.jpg" class="colorpalette_close" />
<div class="colour_palette">
<div colorid="6" colorregion="bgcolor" style="background:#000000" class="colour_palette_box"></div>
<div colorid="7" colorregion="bgcolor" style="background:#00FF00" class="colour_palette_box"></div>
<div colorid="8" colorregion="bgcolor" style="background:#0000FF" class="colour_palette_box"></div>
<div colorid="9" colorregion="bgcolor" style="background:#FF0000" class="colour_palette_box"></div>
<div colorid="10" colorregion="bgcolor" style="background:#FFFF00" class="colour_palette_box"></div>
</div>
</div>
</div>
Thanks
div.region
is not an ancestor ofdiv.colour_palette_box
, that's why.closest
does not work.