CODEWITHSUNDEEP
javascriptjquery-selectorsjquery
Techie
Techie

Reputation: 45124

How to get the closest particular div?

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

Upvotes: 0

Views: 122

Answers (4)

Alexandre Lavoie
Alexandre Lavoie

Reputation: 8771

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

jQuery(this).parent().parent().prev('div.region')

Upvotes: 1

Sang Suantak
Sang Suantak

Reputation: 5265

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

Upvotes: 1

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14282

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

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')

Upvotes: 0

Related Questions