Selecting the next sibling of the item just clicked

Question

I have a ul which contains images. These images are profile images fetched from twitter and appended into the ul dynamically. Once the user clicks on any of the images, I need to also cache the node of the image right next to it (the next sibling). I tried using the next() selector like below, but what gets logged in the console is a message I do not understand. Here is the code:

$("ul#container").on("click", "img", function(){
  var nextImage = $(this).next();
  console.log(nextImage);
}

Here is what gets logged in the console:

[prevObject: p.fn.p.init[1], context: , selector: ".next ()"]

Could you please help me understand what I am doing wrong? Thanks for reading!

Answer 1

Nothing wrong.

That is how Chrome now logs jQuery objects.

Now go have some fun with it!

Answer 2

Try:

$("ul#container").on("click", "img", function(){
  var nextImage = $(this).next().get(0);
  console.log(nextImage);
}

Or

Try This Plugin For Chrome