How to find the ID of the next li (list item) within an ul (unordered list)

Question

I'd like to pass a function the id of an <LI> and have it return the id of the next one available within the <UL>.

The id's may not be in order, and there are other elements nested within the <LI> so I can't just get the next one of those.

I've searched all over the web and tried various combinations without success.

HTML:

<ul class="timeline" id="timeline">

    <li id="timelineLI-1A4">
        <div class="timelineIcon letter"></div>
        <div class="dateContainer"></div>
    </li>

    <li id="timelineLI-2">
        <div class="timelineIcon mail"></div>
        <div class="dateContainer"></div>
    </li>

</ul>

JavaScript/JQuery Code:

function openNextTile() {
    console.log(lastTileOpened);

    // Get the current tile that's open
    if (lastTileOpened == null) {
        openFirstTile();
    } else {
        console.log('opening next tile with keyboard');
        var getNextLIID = $('ul#' + 'timelineTile-' + lastTileOpened).next();
        animateTile(getNextLIID);
    }
}

Did you try [searching the API Docs](http://api.jquery.com/?s=next)? — Jason P, Aug 08 '13 at 16:01
This question is similar to http://stackoverflow.com/a/1817801/328275 — axiopisty, Aug 08 '13 at 16:02

tymeJV · Accepted Answer · 2013-08-08T16:13:50.180

3

This seems very easy to accomplish:

function getNext(id) {
    return $("#" + id).next("li").attr("id");
}

Demo: http://jsfiddle.net/QKRrM/

edited Aug 08 '13 at 16:13

answered Aug 08 '13 at 16:04

tymeJV

103,943
14
161
157

Thanks - but that returns me 'undefined'? – Michael Bellamy Aug 08 '13 at 16:12
So it does, I copy and pasted your code so I must be doing something wrong - I'll check first thing in the morning once I'm back at work. – Michael Bellamy Aug 08 '13 at 17:06
1

@MichaelBellamy -- No problem. If you're actually passing the jQuery object into the function, then you'll have to tweak the function (replace `$("#" + id)` with whatever param you pass in) – tymeJV Aug 08 '13 at 17:35

score 0 · Answer 2 · answered Aug 08 '13 at 16:04

0

var nextId = function( id ) {
    return $('#' + id).next().attr('id');
};

Example usage:

<ul>
    <li id="one">...</li>
    <li id="two">...</li>
</ul>

console.log(nextId('one')); // "two"

answered Aug 08 '13 at 16:04

André Dion

21,269
7
56
60

How to find the ID of the next li (list item) within an ul (unordered list)

2 Answers2