IE 8, jQuery 1.7.1 $(element).parents(selector) returns siblings also

Question

I have a form with this layout:

<div class='detail'>
    <div>
        <input type='button' class='save' />
    </div>
</div>
<div class='detail'>
    <div>
        <input type='button' class='save' />
    </div>
</div>
<div class='detail'>
    <div>
        <input type='button' class='save' />
    </div>
</div>

When $(".save").click() is triggered. I call $(this).parents(".detail")

For IE, this is what happens: - The parent <div class='detail'> is selected as well as the previous <div class='detail'> siblings.

For FF, this is what happens: - Only the parent <div class='detail'> is returned.

The correct functionality I'm looking for is what FF is doing.

May I know how to do a work-around for IE.

Thank you.

EDIT: This is the click event handler:

$(".product_details .button_save_draft").bind("click", function (event) {
    event.preventDefault();
    alert($(this).parents(".product_details").length);
});

Answer 1

I don't have any idea why the above is working as described above, but as a solution probably you need to look at .closest()

$(".product_details .button_save_draft").bind("click", function (event) {
    event.preventDefault();
    alert($(this).closest(".product_details").length);
});

Also see the difference between them