Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inconsistent multiple element selection by shared ID #4842

Closed
resetcoder opened this issue Feb 11, 2021 · 1 comment
Closed

Inconsistent multiple element selection by shared ID #4842

resetcoder opened this issue Feb 11, 2021 · 1 comment

Comments

@resetcoder
Copy link

Description

Where there are multiple container elements with children having the same ID attribute, jQuery selector selects only the first elements from the first container with matching ID, but all elements from the following containers. Even though if elements shouldn't share the same ID attribute this behavior may lead to hardly traceable bugs/malfunctions.

Link to test case

https://codepen.io/resetcoder/pen/dyOObbB

Code

<html>
    <head>
        <style>
            #AA {
                color: red;
            }

            #AB {
                color: blue;
            }

            #AC {
                color: green;
            }
        </style>
        <script src="jquery-3.5.1.js"></script>
        <script>
            $(document).ready((e) => {
                $("#AA").find("#X").html("X set");
                $("#AA").find("#Y").html("Y set");
                $("#AA").find("#Z").html("Z set");

                $("#AB").find("#X").html("X set");                
                $("#AB").find("#Y").html("Y set");
                $("#AB").find("#Z").html("Z set");

                $("#AC").find("#X").html("X set");                
                $("#AC").find("#Y").html("Y set");
                $("#AC").find("#Z").html("Z set");                
            });
        </script>
    </head>
    <body>
        <div id="A">          
            <div id="AA">
                <div id="X">[unchanged]</div>
                <div id="X">[unchanged]</div>
                <div id="Y">[unchanged]</div>
                <div id="Y">[unchanged]</div>
                <div id="Z">[unchanged]</div>
                <div id="Z">[unchanged]</div>
            </div>
            <div id="AB">
                <div id="X">[unchanged]</div>
                <div id="X">[unchanged]</div>
                <div id="Y">[unchanged]</div>
                <div id="Y">[unchanged]</div>
                <div id="Z">[unchanged]</div>
                <div id="Z">[unchanged]</div>
            </div>
            <div id="AC">
                <div id="X">[unchanged]</div>
                <div id="X">[unchanged]</div>
                <div id="Y">[unchanged]</div>
                <div id="Y">[unchanged]</div>
                <div id="Z">[unchanged]</div>
                <div id="Z">[unchanged]</div>
            </div>
        </div>
    </body>
</html>

Output

X set
[unchanged]
Y set
[unchanged]
Z set
[unchanged]
X set
X set
Y set
Y set
Z set
Z set
X set
X set
Y set
Y set
Z set
Z set
@mgol
Copy link
Member

mgol commented Feb 11, 2021

Thanks for the report. However, this behavior is intended - when passing just an ID, we use a shortcut via getElementById for performance reasons; in other cases it goes to querySelectorAll as long as the browser recognizes the selector. We take an assumption that the HTML structure is correct, in these cases both behaviors is compatible.

@mgol mgol closed this as completed Feb 11, 2021
@snyk-bot snyk-bot mentioned this issue May 3, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mgol @resetcoder