javascript - 如何获取最接近的特定div？

Question

我想做的是，当用户单击颜色(div.colour_palette_box)时，我想更新 Big Box(div.region)。问题是代码应该是动态的，因为我有几个集合(div.color_set)。其中之一如下所示。

这是我指的用户界面，

在 Fire Bug 中，它看起来像下面这样。

到目前为止我尝试过的是。

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

    });

上面的代码没有让我获得与单击的 div.colour_palette_box 最接近的 div.region ？我怎样才能得到它？

更新

实际 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>

谢谢

Answer 1

试试这个:

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);
});​