How to get next or previous attribute id in jQuery?

Question

I have the following code

<a class="getty" id="1" href="/...">One<./a>
<a class="getty" id="2" href="/...">Two<./a> 
<a class="getty" id="3" href="/...">Three<./a>

When I'll click on Left or right, I'll need to get the previous ID.
Example : If I'm on id="2", I need to get id="1" if I click on left.

$(document).keydown(function(e){
    if (e.keyCode == 37) {
       $('.getty').attr("id");
       return false;
    } });
    if (e.keyCode == 33) {
       $('.getty').attr("id");
       return false;
    } 
});

How can I do that ?

Thanks

Hi! You do have a question! Sorry, just thought it was funny ;-P — Bojangles, Mar 22 '11 at 19:33
Seriously, with 32 questions you should really know how to format your posts by now. http://stackoverflow.com/editing-help *Edit:* And look at what we've done, guys. — BoltClock, Mar 22 '11 at 19:35

score 11 · Accepted Answer · answered Mar 22 '11 at 19:45

11

To get the previous id when link is clicked.

$('.getty').click(function(e) {
    e.preventDefault();
    var x = $(this).prev().attr('id');
    alert(x);

});

You can do the same for next by using the next() function

Check working example at http://jsfiddle.net/H3hdy/

answered Mar 22 '11 at 19:45

Hussein

40,778
25
110
143

Now, I'm doing : alert($('.getty').next().attr("id");) And it displays null – Steffi Mar 22 '11 at 20:49
Use the alert in the click event and make use of $(this) to target current clicked item e.g. alert($(this).next().attr("id")); – Marc Uberstein Mar 22 '11 at 20:57
@steffi as Marc said, in your alert use `$(this)` instead of `$('.getty')`. It's also recommended to set a conditional for the last item since doing next() on the last `
` will get you undefined.

Hussein

Mar 22 '11 at 21:08

I tried `alert($(this).next().attr("id"));` but it's the same – Steffi Mar 22 '11 at 22:39

score 1 · Answer 2 · answered Mar 22 '11 at 19:36

1

You can use jQuery's next function to get the next sibling, and prev to get the previous sibling.

answered Mar 22 '11 at 19:36

Greg

32,510
15
88
99

score 1 · Answer 3 · answered Mar 22 '11 at 19:41

1

As GregInYEG mentioned, you need the jQuery next function, but since you are using keys binded to the document, you will also need a way to track which one is the current one.

answered Mar 22 '11 at 19:41

Paul Sham

3,095
2
22
31

I don't really understand :S : `a way to track which one` – Steffi Mar 22 '11 at 19:45
In your example, you're on `id='2'` and you can use the `.prev()` to go to `id='1'`. But, in your javascript, you're targeting `$('.getty')` which doesn't specify which one you are targeting to go to the next or previous one. Also, because you're using keystrokes, not a click, you can't just target based on the one a user clicked on. So, you can either add a class to the id that you're currently on, or store the id of the current one in a variable. I may have been overthinking what you needed, but hopefully this clears up what I meant. – Paul Sham Mar 22 '11 at 20:06
Now, I'm doing : `alert($('.getty').next().attr("id");)` And it displays `null` – Steffi Mar 22 '11 at 20:12

How to get next or previous attribute id in jQuery?

3 Answers3

Check working example at http://jsfiddle.net/H3hdy/