0

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,

enter image description here

In fire bug it will look like this below.

enter image description here

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

Improve this question
5
  • Better post your actual HTML code, not a screenshot, and a jsfiddle.net demo.
    – Felix Kling
    Commented Nov 12, 2012 at 5:08
  • question has been updated as requested.
    – Techie
    Commented Nov 12, 2012 at 5:11
  • 1
    I think you'll need to take jQuery(this).parent().parent().prev('div.region') or something like that
    – Alexandre Lavoie
    Commented Nov 12, 2012 at 5:11
  • 1
    div.region is not an ancestor of div.colour_palette_box, that's why .closest does not work.
    – Felix Kling
    Commented Nov 12, 2012 at 5:13
  • @Alexandre Lavoie : Thanks if you can post it as an answer I can accept it.
    – Techie
    Commented Nov 12, 2012 at 5:14

4 Answers 4

Reset to default
1

Try this:

jQuery('div#color_wrapper').on('click', 'div.colour_palette_box', function() {
    var bgColor = $(this).css("background-color");
    $(this).closest("div.colorpalette").prev("div.region").css("background-color", bgColor);
});​
Improve this answer
1

Try this instead :

jQuery('div#color_wrapper').on('click','div.colour_palette_box',function(){
    jQuery(this).parents("div.color_set").find("div.region")
                .css("background", jQuery(this).css("background"));
});

Hope this will help

Improve this answer
1

You need to get in the same parent to use .prev() so use this code :

jQuery(this).parent().parent().prev('div.region')
Improve this answer
0

region is a sibling of the parents of box so since it isn't an ancestor closest won't work

try:

$('.colour_palette_box').closest('.colorpalette').siblings('.region')
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.