Felix Felix - 1 month ago 16
CSS Question

Jquery resizable is not working properly with child class

for some reason resizable for the child is not working .

<div class="parent"><img class="child"></div>
<div class="parent"><img class="child"></div>
<div class="parent"><img class="child"></div>


When I tried
$(".parent").resizable( {alsoResize: ".child"});
then resizing is happen but it resize all images instead of corresponding image .

When i tried

$(".parent").resizable({ alsoResize: $(this).closest('.child') });


or

$(".parent").resizable({ alsoResize: $(this).find('.child') });


then only div is resizing , not the image inside. Why this happen?

Also when i use
$(".child").resizable();
then
<div class="ui-wrapper" >
is coming and it become

<div class="parent">
<div class="ui-wrapper"><img class="child ui-resizable"></div>
</div>


but here what is the problem is img is not showing because display none is automatically coming , width and height of ui-wrapper class is not set or set 0 . please help to find out the problem .

Answer

Firstly your selector is incorrect; you're missing the . prefix. Secondly this does not refer to the .parent element, it refers to the scope the event handler is being created in. To fix this you can loop through the .parent elements and attach the events to them individually. Try this:

$(".parent").each(function() {
    $(this).resizable({ 
        alsoResize: $(this).find('.child')
    });
});