jQuery调整大小处理程序不会对每个元素进行操作

Question

Edited since original posting

I have written a resize handler that listens for a parent div being resized (as a result of an ancestor container div being dragged).

The handler relies on the iframe method described here, which I had employed in my own code: Resize on div element

I need to know that my divs have been resized as a result of the parent div being resized, and then do something as a result. Note that this is not a window/browser resize event.

When only one of my divs is on the page, it works fine. When multiples are used, only the last one is affected by my script. I cannot figure out why and am now asking for help in figuring this out.

This has all come about during my attempts to scope the code so that it does properly apply itself to each one of my affected divs in turn.

Fiddle here: https://jsfiddle.net/GrumJim/xpvt214o/939643/

The offending code begins with:

$('.rsg_testtiles_display_macro_container').each(function(index) {

There are two divs in my markup, but only the second one is processed (12 outputs to the console represent the 12 child divs, but the five child divs in the first div are ignored) and I don't know why.

All help much appreciated.

Answer 1

It seems like you shouldn't actually iterate over the $(this) instance, since is already referring to a single element.

Try to remove this line: $(this).each(function() { (and the appropriate closing of the function & parenthesis...)

Answer 2

Mark Scultheiss's comment to the original question had the answer, thanks for letting me work that one out.

I was most definitely calling things in the wrong order, particularly where I was assigning this to the var. I have solved this by properly calling the on, then the each, then assigning this to the var and working through each of my divs in turn.

I have far to go on my JavaScript journey, but you put me on the right path there. Thanks folks!