jQuery how does one peek ahead in each()?

Question

I can't seem to find a definite answer for this. Consider the following:

var dupe = false;
    $(".syndUID").sort(function(a,b) {
        return a - b;
    }).each(function(i, el) {
        alert($(this).val() + " - " + $(this).next().val());
        if($(this).val() == $(this).next().val()) {
                dupe = true;
                return;
        };
    });

This code is an attempt to find duplicate values in a set of inputs with the class syndUID. They are scattered about a form, so not next to eachother in the DOM.

next().val() is always undefined though. am I using the wrong function? How do I simply peek ahead to the next element? I have access to the index, but I don't know how to even make use of it.

EDIT:

After reading the comments and answers I realized there really is no proper iterator in jQuery, which seems really stupid to me since it provides each(). I also had another bug with the above code. Here is the final solution I used that works:

// duplicate check
    var dupe = false;
    var prevVal = undefined;
    $(".syndUID").sort(function(a,b) {
        return $(a).val() - $(b).val();
    }).each(function() {
        if($(this).val() == prevVal) {
            dupe = true;
            return false;
        }
        prevVal = $(this).val();
    });

For anyone who finds this via google, the answers provided by others may be a decent alternative solution, but for my needs I found this sufficed.

Answer 1

You can do something like $('.syndUID')[i+1] to regrab the list, focusing on that element (and optionally turning it back into a jQuery object)

Using [i+1] will return a DOM element, but you can use .eq(i+1) to return a jQuery object. Or if you hate your future developers, wrap the DOM element in $() because screw readability!

As Andreas stated -- regrabbing the list is wasting memory. Before the loop, cache the object into a variable with var element = $('.syndUID') so you're not iterating the DOM so much.

Answer 2

next() grabs the next sibling - not the next ancestor or parent.

For example, if we have an unordered list, next() works like this:

var a = $('#listone.first').next().val();
console.log(a) //outputs "Second"

<ul id="listone">
<li class="first">First</li>
<li class="second">Second</li>
</ul>
<ul id="listtwo">
<li class="third">Third</li>
<li class="fourth">Forth</li>
</ul>

So, if you are trying to grab the next parent, .val() applied to .next() wont work. I dont know what your outputting to (table, UL, DIV, etc) so it is hard to give you a working solution - but that is likely your problem. You are not traversing the DOM properly.

Answer 3

Well, you have your sorted array already, maybe instead of trying to do this with .each() you just use a simple for loop?

var elemArray = $(".syndUID").sort(function(a,b) {
    return a - b;
});

for(var i = 0; i < elemArray.length; i++){
    if(elemeArray[i].value == elemArray[i+1].value){
       //do something with comparison
    }
}

However, this will only check for a duplicate in the next syndUID element in the array. In order to do a complete search you would need to check each element against every element (excluding itself) from the array. That would involve a nested loop which will add an order of n^2 to your function