JQuery find next DOM element by id where Id is not UNIQUE

Question

This is doing my head in, I can't seem to find the dom element I need to find I have tried next/closest/find and just can't seem to the div. The code is very self explanatory.

The line $(this).parent().siblings("div").find("#accounts").slideToggle(500); will not get me the div called accounts.

<div data-bind="foreach: Households " class="householdRow">
    <div class="actions item"><img id="toggle" src="~/Images/toggle.png"/></div>
    <div class="item" data-bind="text: HouseholdId"></div>
    <div class="item" data-bind="text: Name"></div>
    <div class="item">IACodes</div>
    <div class="item">Date</div>
    <div class="numberItem item">T12</div>
    <div class="numberItem item">AUA</div>
    <div class="item" data-bind="text: Segmentation.Name"></div>
    <div class="actions item"></div>
    <div id="accounts" data-bind="foreach: Accounts">
        <div class="accountRow">
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="dateFormat: xxx"></div>
            <div class="numberItem item" data-bind="text: xxx"></div>
            <div class="numberItem item" data-bind="text: xxx"></div>
            <div class="item"></div>
            <div class="actions item"><img id="delete" src="~/Images/delete.png"/></div>
        </div>
    </div>
</div>



<script type="text/javascript">
$(function() {

    ...

    $(document).on("click", "#toggle", function () {
        //$(this).next("#accounts").slideToggle(500);
        $(this).parent().siblings("div").find("#accounts").slideToggle(500);
    });

});

</script>

ID's need to be unique. Try changing `toggle` and `accounts` to classes instead. — cfs, Aug 08 '13 at 21:06
you cant use .find with non-unique id's using the id selector. Try the attribute equals selector instead. Or better yet, don't use non-unique id's. — Kevin B, Aug 08 '13 at 21:08
Related: http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types — cHao, Aug 08 '13 at 21:19

cfs · Accepted Answer · 2013-08-08T21:16:20.013

ID's must be unique or else you will get broken/undefined behavior when querying the DOM. Change toggle and accounts to classes instead.

Siblings() will return you a list of all siblings of the parent of toggle. Note that accounts is one of those siblings. When you call find('.accounts'), jQuery is looking for descendants of those siblings, so it will never find accounts. Instead, just use accounts as the filter in your siblings() call:

$(document).on("click", ".toggle", function () {
    $(this).parent().siblings(".accounts").slideToggle(500);
});

Working Demo

score 1 · Answer 2 · answered Aug 08 '13 at 21:12

1

While this could work you really should change your html to avoid duplicated ids as that's not valid and causes troubles when using id selectors as you already noticed

$(this).parent().siblings("div").find("[id=accounts]").slideToggle(500);

answered Aug 08 '13 at 21:12

Claudio Redi

67,454
15
130
155

score 0 · Answer 3 · answered Aug 08 '13 at 21:12

0

Try this: $('#accounts', $(this).parent().siblings("div"))

answered Aug 08 '13 at 21:12

Hamza Kubba

2,259
14
12

Though, ideally you should change the output to use a *class* called 'accounts', and change the above `'#accounts'` to `'.accounts'`. – Hamza Kubba Aug 08 '13 at 21:14

score 0 · Answer 4 · edited Aug 08 '13 at 22:01

There is wrong here:

$(this).parent().siblings("div").find("#accounts")
___________from_↑_____________________________to_↑

Here you are trying to find "accounts" DOM under the $(this).parent().siblings("div"), actually it can't find it.

So You can do it like this:

$(this).parent().siblings("div#accounts").slideToggle(500);

or if you know the ID, you can directly code as:

$("#accounts").slideToggle(500);

It is more effective.

JQuery find next DOM element by id where Id is not UNIQUE

4 Answers4