Question

<ul>
  <li>
    <img src="a">
  </li>
  <li>
    <img src="b">
  </li>
  <li>
    <img src="c">
  </li>
  <li>
    <img src="d">
  </li>
</ul> 

This is just an example, this above structure belongs to a carousel and IMG “b” is focused to the screen. I just want to know how to get the height of the previous image (that is “a”) and the next image height (that is “c”).

I tried with .closest and .siblings() but that didn’t work.

Answer 1

Your attempts didn’t take into account that you should move one parent up before you can get to any siblings:

var $prevItem = $(this).parent().prev('li').children('img'), // <-- "a"
$nextItem = $(this).parent().next('li').children('img'); // <-- "c"