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!

That's a jQuery object and contains one element. You should be able to work with that in code. — pimvdb, Dec 20 '12 at 14:47

score 5 · Answer 1 · answered Dec 20 '12 at 14:47

5

Nothing wrong.

That is how Chrome now logs jQuery objects.

Now go have some fun with it!

answered Dec 20 '12 at 14:47

Naftali

144,921
39
244
303

7

The logging of jQuery objects was much better in previous versions of Chrome. – pimvdb Dec 20 '12 at 14:47
@pimvdb yea... now it is quite confusing... before it actually showed you the element... How do you make it log the element now?.... – Naftali Dec 20 '12 at 14:48
The only hack I've found is running `console.log = inspect;` in the console. But that's cumbersome. – pimvdb Dec 20 '12 at 14:48
What? No it isn't. What version of Chrome are you guys running? – Per Salbark Dec 20 '12 at 14:50
You can get the Dom Element by doing `console.log($('div')[0]);` or you can convert it back to jQuery by wrapping it again `console.log($($('div')[0]));` http://jsfiddle.net/uhURd/ – wirey00 Dec 20 '12 at 14:51
Alright Neal! Indeed it seems I was trying to fix something that wasn't broken anyway! Each img was also wrapped in its own
. Thus indeed there were no other images within the li. Lesson for the future: I will also be posting the HTML in my questions. Thanks a lot for your answer.

Andreas

Dec 20 '12 at 14:56

score 1 · Answer 2 · answered Dec 20 '12 at 15:09

1

Try:

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

Or

Try This Plugin For Chrome

answered Dec 20 '12 at 15:09

Akhil Sekharan

12,467
7
40
57

Selecting the next sibling of the item just clicked

2 Answers2

Linked