Selecting grandparent div with jQuery doesn't work in IE/Chrome

Question

I have the following jQuery function:

function GetGrandparentDiv(item) {
    return item.parents('div:eq(1)');
}

Which is called by the following function:

$(".addset").click(function(e){
     e.preventDefault();

     var addstr = "<span class='setrow'>random html</span>";
     var gp = GetGrandparentDiv($(this));
     alert(gp.attr('id'));
     gp.find("div.esets").append(addstr);

    });

As you can see, I stuck an alert in there. The code works great in FireFox and shows the correct ID of the grand parent div. However, in IE and Chrome, it does not work. The ID in the alert box in IE/Chrome is also null or "".

Am I doing something that is not supported by IE/Chrome?

EDIT:

The Html looks something to the effect of (I don't have it in front of me)

<div id="grandparent">
     <div id="parent">
           <input type="button" class="addset" value="Add Set" />
           <!-- other stuff -->
     </div>
     <!-- other stuff -->
</div>

EDIT: Here's the actual HTML since I now have it in front of me:

<div id="random2" class="ebox">
    <div class="ebheader">
        <!-- text -->      
         <span class="right">
          <input type="button" class="addset" value="Add Set"/>
     </span>
    </div>
<!-- other stuff -->
</div>

Using the GetGrandparentDiv() function did not work in anything other than FF for some odd reason. The irony of the situation is that I use that function in other areas of my application and it works correctly.

What I ended up doing for the solution was the following:

var gp = $(this).closest(".ebox");

Since each dynamically added 'container' if you will has a class of type .ebox (since I don't know the id of the div, but I DO know the class). Thanks for the help and suggestions!

Answer 1

Not sure about the compatibility thing, but maybe alternate code that does the same thing might work. Instead of item.parents('div:eq(1)') to get the first div in a list of parent elements, why not try item.closest('div') or at least item.parents('div').eq(1). I love closest though, it's a great tool.

Another thing I would try is reversing the quotes for the addstr variable, as in:

 addstr = '<span class="setrow">random html</span>';

Answer 2

Try (changed to id from a class - sorry):

$(".addset").closest("#grandparent");

to reach the grandparent div.

Or, $(".addset").parent().parent(); if you don't know the id of the div.

Answer 3

With the sample code provided, this works as expected in IE 8.0.6001 and Chrome 4.0.213 -- I get an alert with the text "grandparent".

Perhaps you have some malformed HTML?

Also, this syntax should work the same (at least it did in my tests on this problem), but you could give it a shot and see:

function GetGrandparentDiv(item) {
    return item.parents('div').eq(1);
}